调用.load（）后jQuery不会触发两次

Question

我想通过(#mydiv)更改div AJAX的内容。

为此，我在(#change-button)内创建一个按钮#mydiv，触发以下jQuery脚本

$(#change-button).on("click", function(){

    $("#mydiv").load("page_to_be_loaded.hmtml #mydiv");
});

基本上我将#mydiv中的文本替换为新页面的文本。 这段代码第一次运行正常，但是如果我再次点击新加载的#change-button jQuery则不再触发。

我理解这个理论：#mydiv没有看到由.load()注入的新DOM，因此jQuery脚本不起作用。< / p>

我在SO上发现了至少两个类似的问题，但没有一个得到适当的回答，总的来说似乎没有解决我的问题。任何人都可以清楚地解释这些案例中的最佳做法。

以下是其他问题：

Update DOM after insert in jQuery

.on()-Function does not rebuild DOM

谢谢

Answer 1

使用这样的委托：

$("body").on("click","#change-button", function(){
    $("#mydiv").load("page_to_be_loaded.hmtml #mydiv");
});

Answer 2

我认为问题是因为我们的内容是动态加载的，因此它们在事件绑定时不存在。这就是它没有解雇的原因。

您可以使用像bellow

这样的委托

$(document).on("click",'#change-button',function(){})