Question

的示例

如果您点击红色框，则会收到提醒。

如果您点击某个链接，蓝色框中的所有内容都会被替换为红色框。链接将消失，如果您点击一个红色框，那么您将不会收到任何警报。

为什么会这样？
它与innerHTML有关吗？
在所有浏览器中它的工作方式是否相同？

这是另外一个例子http://jsbin.com/ukoqud/1/edit在这个例子中，您会在点击链接后收到提醒。事情以非常相似的方式发生，但结果却不同。

我想了解原因，没有必要修复我的代码。

Answer 1

当你调用$(".red")时，它会返回当时存在的DOM元素集合。所以$(".red").click(function...)只是将处理程序绑定到这些元素上的click事件。如果稍后使用相同的类创建新元素，则它们不在此集合中，因此它们没有绑定到它们的处理程序。 jQuery不会观察DOM的更改并动态更新处理程序 - 绑定只是在您调用click()时匹配的元素。

您需要在添加新HTML后再次绑定处理程序，或者将委派与.on()一起使用：

$(".blue").on("click", ".red", function(){
    alert('click on a red box detected');
});

这可以通过将处理程序绑定到$(".blue")来实现，而$('.red').parent().html(...)不会动态更改。处理程序检查您单击的元素是否与“.red”选择器匹配，因此它能够处理动态添加的元素而无需重新绑定。

我认为它在你的第二个例子中起作用的原因是因为红色块不在蓝色框内开始。当你把它移到里面时，jQuery重用了相同的DOM元素，所以绑定也随之而来。在第一个示例中，红色框从蓝色框内开始。当你执行$('.red').parent()时，它做的第一件事是空{{1}}（蓝色框），因此原始的红色元素将从DOM中删除，并且其绑定将丢失。

Answer 2

我们需要了解如何设置元素的html。然后你会自己弄清楚你的答案。

看看这个垃圾箱Updated Bin

当我们设置元素的HTML时，它首先删除其中的所有元素。
这些元素不会从内存中删除，具体取决于它们是否是垃圾回收。
如果任何一个孩子有参考，那么该特定孩子将不会被垃圾收集。
在您的情况下，我们引用了红色元素，因此它仍然存在于内存中但不是文档的一部分。
当我们在我的例子中说blue.html（红色）时，红色元素再次成为文档的一部分，但这次不会有任何处理程序因此你的点击不起作用。

在你的例子2中，

红色元素始终是文档的一部分，因此当红色元素在蓝色元素内移动时，没有处理程序丢失。

我希望这会有所帮助。

Answer 3

因为当您单击该链接时，您将删除屏幕上的所有内容并从头开始创建所有内容，并且事件绑定会消失。所以你应该使用这个

 $(".blue").on("click", ".red", function(){
  alert('');
 });

以这种方式，绑定以不同方式完成。它没有静态绑定它

更改父级HTML时不会触发子级事件

3 个答案: