当您更改innerHTML属性

确定与处理程序会发生什么事可以说我有当您更改innerHTML属性

<div id="container"/>

，我把一个按钮，在使用id =“按钮”这个容器。然后，我为它

$("#button").click(function() { 
foo(); 
}

然后我改变DIV的innerHTML这样。单击处理程序：

$("#container").html = "<h1> Foo </h1>";

然后我设置定时器，让我们比方说5秒后，将执行以下代码：

function(){ 
$("#container").html = "<button id="button" type="button">Click Meh!</button>" 
$("#button").click(function() { 
foo(); 
} 
}

我的问题是：第一个按钮被“摧毁”，第一个.click（）处理程序也被销毁了吗？或者第二个.click（）将为同一个按钮创建第二个处理程序，如果我只想要1个处理程序，则在调用第二个.click（）之前，我必须使用$("#button").off("click")？

2015-02-05 chnging

可能的重复https://stackoverflow.com/questions/595808/is -IT-可能对追加到内html-without-destroying-descendants-onclick-fu – Bergi 2015-06-06 15:41:45

$('#container').on('click', '#button', foo);

现在单击该按钮时，我们就断火foo的功能。即使您稍后删除该按钮并添加该按钮，该活动仍将被委派给'#container'。

2015-02-05 16:08:58 Ohgodwhy

很好的答案。我在写一些关于DOM树的文章时会写这个。 – 2015-02-05 16:12:05

用于该功能的内存会发生什么情况？我的意思是它是否真的删除了该功能，或者只是让它像一个“僵尸”那里我的意思是无法达到的功能？ – chnging 2015-02-05 16:12:42

@chnging：这个答案的一小部分但很重要的部分是缺少的：Javascript是垃圾收集的，所以当事件处理程序被取消关联时，因为它被定义为匿名函数，所以没有别的东西可以引用它，所以函数将可用于垃圾收集。 – doldt 2015-02-05 16:13:37

是的，一旦你删除了按钮，第一个处理程序也将因为使用“.click（）”功能而被破坏。您不需要显式删除该点击处理程序。

或者使用下面的“.on”函数，那么你不需要一次又一次地写函数。它会检查动态添加元素并附加事件。

$("body").on("click", "#button", function() { 
foo(); 
});

2015-02-05 16:10:58

如果你的问题是如果你必须在dom更改时重新绑定onclick处理程序，那么答案是肯定的。

如果你在问处理函数是怎么回事，我的猜测是它会在节点被删除时得到垃圾回收，如果你想避免创建几个函数，只需将处理程序写为命名函数，并且使用它而不是匿名的..

如果你问这个处理程序是否会被绑定两次：它将被绑定到选择结果中的任何内容，如果第一个按钮在你运行.click时存在，那么它将尽管#id只返回1节点，所以它会绑定到它找到的第一个＃按钮，无论它是否已经绑定...

2015-02-05 16:16:01

回答