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

Child's event is not fired when parent's HTML is changed

本文关键字：事件 HTML      更新时间：2023-09-26

下面是一个示例 http://jsbin.com/ukoqud/3/edit

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

如果您单击链接，蓝色框中的所有内容都将替换为红色框。链接将消失，如果您单击红色框，则不会收到警报。

  1. 为什么会这样？
  2. 它与innerHTML有关吗？
  3. 它在所有浏览器中的工作方式都相同吗？

这是另一个示例 http://jsbin.com/ukoqud/1/edit 在此示例中，单击链接后您将收到警报。事情以非常相似的方式发生，但结果是不同的。

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

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

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

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

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

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

我们需要了解元素的 html 设置是如何工作的。然后你会自己找出答案。

看看这个垃圾箱 更新的垃圾桶

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

在您的示例中2，

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

我希望这会有所帮助。

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

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

这样，绑定的完成方式就不同了。它不会静态绑定它

相关文章：