1

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

如果单击红色框，则会收到警报。

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

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

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

我想了解原因，无需修复我的代码。

4

3 回答 3

3

当您调用 时$(".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 中删除，它的绑定丢失了。

于 2013-04-06T11:34:32.863 回答
1

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

看看这个 bin更新了 Bin

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

在您的示例2中，

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

我希望这将有所帮助。

于 2013-04-06T12:03:21.600 回答
0

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

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

这样，绑定就不同了。它不会静态绑定它

于 2013-04-06T11:37:57.707 回答