javascript stoppropagation 不适用于 ajax .load

Question

当点击 时，我使用 .stopPropagataion() 来停止

中的冒泡标签。

$(document).ready(function(){
   $(".article a").click(function(e) {
        e.stopPropagation();
   });
});

使用此 HTML：

<li class="article" onlick="javascript:somefunction();">
   <div id="div_id">
      <a>Some link</a>
   </div>
</li>

一切正常，但随后我使用 $('#div_id').load("div_html.html") 将一些内容动态加载到 div 中。现在我的 .stopPropagation() 不会停止冒泡。为什么它不再起作用了？

Answer 1

问题是，当您更新 div 的内容时，您会销毁其中的所有元素（包括附加到它们的任何事件处理程序）。您的代码正在将 click 事件挂接到 div 中的 a 元素当您的代码运行时 ; div 中的新 a 元素将不会被连接。

在您的情况下，您最好使用 delegate (delegate ="http://jsbin.com/abizew/2" rel="nofollow">实时示例，带有 load)：

$(document).ready(function(){
   $(".article div").delegate("a", "click", function(e) {
        e.stopPropagation();
   });
});

挂钩 click改为 div。当单击发生时，它会从链接冒泡到 div，其中 jQuery 创建的单击处理程序会检查它以查看它是否实际上是对任何 a 元素的单击。如果是这样，它将停止点击。

从 jQuery 1.7 开始，新的推荐语法是 on ：

$(document).ready(function(){
   $(".article div").on("click", "a", function(e) {
        e.stopPropagation();
   });
});

请注意参数的顺序与delegate不同，但除此之外它做同样的事情。

---

我建议避免将旧式 DOM0 处理程序（事件处理程序属性）与新式 DOM2 代码（附加了 jQuery 的处理程序）相结合。在许多浏览器中，这两种机制有些独立，并且可能无法像您希望的那样很好地协同工作。

对此还有另外两条评论：

onlick="javascript:somefunction();"

1. 它是 onclick，而不是 onlick （您缺少 c）
2. 您不使用 javascript ：事件处理程序属性上的伪协议，仅href。只需删除该部分即可。 （为什么它不会导致错误？因为纯粹是巧合，它是有效的 JavaScript - 您正在定义一个标签 你从未使用过。）