Javascript 更改innerHTML属性时，处理程序会发生什么情况

好吧，假设我有

<div id="container"/>

然后我更改div的innerHTML，如下所示：

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

$（“#容器”）.html=“Foo”；

然后我将计时器设置为5秒，之后将执行以下代码：

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

function（）{
$（“#容器”）.html=“单击Meh！”
$（“#按钮”）。单击（函数（）{
foo（）；
}
}

我的问题是：第一个按钮被“销毁”，第一个也被销毁了。它的click（）处理程序也被销毁了？或者第二个。click（）只会为同一个按钮生成第二个处理程序，如果我只想有一个处理程序，我必须在调用第二个按钮之前使用

$（“#按钮”）。关闭（“click”）

是的，当您删除该元素时（通过覆盖该元素的html），您已经解除了单击处理程序与该元素的分离

相反，我们应该只考虑委派事件。我们以静态父元素（如容器）为目标，并将事件委派给它：

$（“#容器”）。在（'click'，'#button'，foo）；

---

现在，单击按钮时，我们将启动foo函数。即使您删除按钮并稍后添加，事件仍将委托给“#容器”。

是一旦删除按钮，第一个处理程序也将被销毁，因为您正在使用“.click（）”函数。您无需显式删除该单击处理程序

或者使用下面的“.on”函数，则无需反复编写函数。它将动态检查添加元素并附加事件

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

---

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

如果您问处理程序函数发生了什么，我猜当节点被删除时，它将被垃圾收集。如果您想避免创建多个函数，只需将处理程序作为命名函数编写，并使用命名函数而不是匿名函数

---

如果您询问处理程序是否将绑定两次：如果在运行时第一个按钮存在，则它将绑定到选择结果中的任何内容。单击会，尽管#id仅返回1个节点，但它将绑定到它找到的第一个#按钮，而不管它是否已绑定…

回答得好。我正打算写这篇文章在谈到DOM树的时候，会说。那么用于函数的内存会发生什么情况呢？我的意思是，它真的会删除函数还是像“僵尸”一样离开它这里我指的是无法访问的函数？@chning：这个答案缺少一个小但重要的部分：Javascript是垃圾收集的，因此当事件处理程序被解除关联时，由于它被定义为匿名函数，其他任何函数都不再有对它的引用，因此该函数将可用于垃圾收集。possib复制品

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