使用load加载外部html后，JQuery发出问题

Question

我正在使用下面的代码将html加载到我的页面中：

$(document).ready(function () {

   $('#loadingArea').load('includes/template1.html');

});

它工作得很好但是出于某种原因，当我使用任何查询来定位属于加载的html文件的任何div时，它不会工作，例如：

template1.html包含：

模板中的按钮

如果我尝试使用：

$("#mybutton").click(function(){

    alert('Something');        

});

它无效。

我该如何解决这个问题？

Answer 1

了解event delegation请参阅：

$("body").on('click','#mybutton',function(){

    alert('Something');        

});

Answer 2

您需要delegate the events。通过附加到最近的静态对象来委托事件：

$("#loadingArea").on("click", "#mybutton", function(){
    alert('Something');
});