更改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")？

Answer 1

1. 是的，当您删除元素时（通过覆盖元素的html），您已使用元素对点击处理程序进行了解析。

2. 相反，我们应该只关注委托活动。我们以静态父元素（如容器）为目标，并将事件委托给它：

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

现在当点击按钮时，我们将关闭foo功能。即使您删除按钮并稍后添加该按钮，该活动仍将委托给＃container;＃container＆＃39;。

Answer 2

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

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

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

Answer 3

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

如果你问的是处理函数会发生什么，我的猜测是当节点被删除时会收集垃圾，如果你想避免创建几个函数，只需将处理程序写为命名函数，并使用而不是匿名的..

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