Question

当前页面上的jQuery工作。

我使用以下命令将远程页面加载到当前页面中的div：

<div class="row-fluid">
    <ul class="nav nav-tabs">
        <li><a data-toggle="tab" id="spotlight" href="#" data-hvalue="menu1">menu1</a></li>
        <li><a data-toggle="tab" id="spotlight" href="#" data-hvalue="menu2">menu2</a></li>
    </ul>
</div>
<div class="showroom" id="showroom"></div>
    <script>
        $('a#spotlight').click(function () {
        $(this).each(function (){
            if($(this).data('hvalue')=="menu1"){
                $.getScript( "http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.min.js", function() {
                     alert('Load was performed.');
                 });
            }
            var temp = $(this).data('hvalue') + " #page";
            $('#showroom').load(temp);
        });
    });
    </div>
</script>

远程页面包含以下代码：

<div class="container-fluid" id="page">
    <div class="row-fluid">
        <button id="DrawItem">Draw Item</button>
        <div id="canvases">
            <canvas width="640" height="480"></canvas>
        </div>
    </div>
</div>

首先，我将此代码段放在远程页面中： $（document）.ready（function（）{ $（ 'A＃DRAWITEM'）。点击（函数（）{ $（ “画布”）。drawArc（{ fillStyle：“黑色”， x：100，y：100，半径：50 }）; }）; }）; 但它不会起作用。我将canvas和jcanvas.min.js脚本放在同一页面中，一切正常。如果我尝试从远程页面加载画布，它将无法正常工作。

Answer 1

您不能在尝试时将事件处理程序分配给元素，因为它当时不存在。相反，您可以将它附加到像这样的容器元素......

$(document).ready(function() {
    $("#showroom").on("click", "#DrawItem", function(){
        $("canvas").drawArc({
          fillStyle: "black",
          x: 100, y: 100,
          radius: 50
        });
    });
});

这将捕获#showroom上的点击事件，并在点击源自#DrawItem时触发事件处理程序。这是事件委托，您可以在这里阅读更多相关内容......

http://api.jquery.com/on/

jQuery - 如何在使用jQuery加载远程页面后让jQuery正常运行？

1 个答案: