Question

点击.stopPropagataion()标记后，我使用<li class="article">来阻止<a>中的冒泡。

$(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 中的a元素上的div事件; <{1}}中的新a元素不会被连接起来。

在您的情况下，最好使用delegate（live example, with load）：

div

在$(document).ready(function(){ $(".article div").delegate("a", "click", function(e) { e.stopPropagation(); }); });上挂钩click。当点击发生时，它会从链接起泡到div，其中由jQuery创建的点击处理程序检查它以查看它是否实际上是对任何div元素的点击。如果是这样，它会停止点击。

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

请注意，参数的顺序与$(document).ready(function(){ $(".article div").on("click", "a", function(e) { e.stopPropagation(); }); });不同，但除此之外它的作用相同。

我建议避免将旧式DOM0处理程序（事件处理程序属性）与新式DOM2代码（使用jQuery附加的处理程序）相结合。在许多浏览器中，这两种机制在某种程度上是分开的，可能无法像你想的那样很好地发挥作用。

另外两条评论：

delegate

它是onlick="javascript:somefunction();"，而不是onclick（您错过了onlick）
您不在事件处理程序属性上使用c伪协议，仅使用javascript:。只需删除该部分。（为什么它不会导致错误？因为完全是巧合，它是有效的JavaScript - 你定义了一个你永远不会使用的label。）

javascript stoppropagation不适用于ajax .load

1 个答案: