2

我曾经在单击标签 时.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()的不会停止冒泡。为什么它不再工作了？

4

1 回答 1

4

问题在于，当您更新 的内容时div，您会破坏其中的所有元素（包括附加到它们的任何事件处理程序）。click您的代码将事件挂接到代码运行时a的元素上；中的新元素不会被勾搭起来。div adiv

在您的情况下，您最好使用delegate（现场示例，withload）：

$(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:在事件处理程序属性上使用伪协议，只使用hrefs. 只需删除该部分。（为什么它不会导致错误？因为纯属巧合，它是有效的 JavaScript——你定义了一个你从不使用的标签。）
于 2011-11-30T11:58:38.867 回答