Javascript stoppropagation不能与ajax .load一起工作

javascript stoppropagation doesn't work with ajax .load

本文关键字：load 一起 工作 ajax stoppropagation 不能 Javascript      更新时间：2023-09-26

我使用.stopPropagataion()在点击<a>标签时停止<li class="article">中的冒泡。

$(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()不能阻止冒泡。为什么它不工作了?

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

在您的情况下，您最好使用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:伪协议的事件处理程序属性，只有href s。把那部分去掉。(为什么它不会导致错误?因为纯属巧合是有效的。你正在定义一个你永远不会使用的标签。)
相关文章：