当更改innerHTML属性时，处理程序会发生什么？

Question

好的，假设我有：

<div id="container"/>

我在这个ID为"button"的容器中放置了一个按钮，然后编写了一个.click事件处理程序。

$("#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()只会为同一个按钮创建第二个处理程序，如果我想要只有一个处理程序，我必须在调用第二个.click()之前使用$("#button").off("click")吗？

- chnging

---

可能是与 https://dev59.com/bHRB5IYBdhLWcg3wiHpl 相关的重复问题：是否可以在不破坏后代元素的情况下附加到 innerHTML 上，具有 onclick 功能？ - Bergi

Answer 1

1. 是的，当您移除元素（通过重写元素的HTML），您已经将单击处理程序与该元素分离。

2. 相反，我们应该只考虑委派事件。我们针对一个静态的父元素（如container），并将事件委派给它：

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

现在，当按钮被点击时，我们将触发foo函数。即使您稍后删除并添加按钮，事件仍将委托给“#container”。

- Ohgodwhy

---

好的回答。我本来想写一些关于DOM树的内容。 - Master Yoda

那么用于函数的内存会发生什么呢？我的意思是它是否真的会删除该函数，还是像一个“僵尸”一样留在那里，也就是说，这个函数永远无法调用？ - chnging

@chnging：这个答案中缺少一个小但重要的部分：JavaScript 是垃圾收集的，所以当事件处理程序被取消关联时，由于它被定义为匿名函数，没有任何其他引用指向它，因此该函数将变得可供垃圾收集。 - doldt

Answer 2

当您删除按钮时，第一个处理程序也将被销毁，因为您正在使用“.click()”函数。您不需要显式删除该单击处理程序。

否则，使用下面的“.on”函数，然后您无需一遍又一遍地编写函数。它将动态检查添加的元素并附加事件。

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

- sai sudhakar

Answer 3

如果你的问题是当dom改变时是否需要重新绑定onclick处理程序，答案是肯定的。

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

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

- Gonzalo Romano