JavaScript stoppropagation与ajax .load无法使用

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") 动态加载一些内容。现在我的 .stopPropagation() 不会停止冒泡。为什么不再起作用了？

Answer 1

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

就您而言，最好使用 delegate (现场示例，与 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: 仅在事件处理程序属性上的伪协议，仅 hrefs。只需删除该部分即可。 （为什么不引起错误？因为 纯粹是巧合, ，这是有效的JavaScript - 您正在定义 标签 你从不使用。）