jquery - jQuery - 在加载带有 jQ​​uery 的远程页面后，如何让 jQuery 正常运行？

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').click(function(){ $("canvas").drawArc({ fillStyle: "黑色", x: 100, y: 100, 半径: 50 }); }); }); 但这行不通。我将画布和 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/