jquery .delegate和动态内容

时间:2011-12-04 13:20:35

标签: javascript jquery

我必须遵循HTML:

<ul class="ulclass">
   <li class="liclass">
      ...some more nesting
           <a href="somelink">somelink</a>
      ....close nesting
   </li>
   <li class="liclass">
   ...

</ul>

来自班级&#34; liclass&#34;的每个li都有一个点击事件,所以我停止从锚点冒泡(大概是<div>在.liclass里面):

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

现在我使用Ajax .load添加更多<li class="liclass">。 stopPropagation适用于静态&#34; .liclass&#34;但不适合动态添加。 假设在加载页面时<ul class="ulclass">的代码存在。 你能不能让我知道如何改变.delegate以阻止动态添加的.liclass的冒泡。

4 个答案:

答案 0 :(得分:4)

在包含动态创建的元素的任何内容上放置另一个委托处理程序,在本例中为ul,以停止传播。

$("ul.ulclass").delegate(".liclass div", "click", function(e) {
          e.stopPropagation();        
});

$("ul.ulclass").delegate(".liclass", "click", function(e) {
          // main code for each li element    
});

因为它们都是同一元素上的委托方法,所以e.stopPropagation()应该可以防止处理程序,即使事件已经冒出来了。

<强> JSFIDDLE DEMO

更新了演示,以显示它使用动态元素。


另一种方法是简单地将处理程序直接绑定到动态创建的div元素。

因此,如果您使用的是.load(),我会假设您正在删除旧内容并将其替换为新内容。在这种情况下,在回调中,只需选择div,然后重新绑定处理程序。

$("ul.ulclass").load('/whatever/', function() {
      // shortcut to binding a handler with stopPropagation and preventDefault
    $(this).find('li.liclass div').bind('click', false);
});

答案 1 :(得分:0)

在完成每个ajax请求后,您需要调用“.delegate”才能使其正常工作。

答案 2 :(得分:0)

如果您使用的是最新版本的jQuery,则正确的代码为:

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

答案 3 :(得分:0)

事件委托意味着:事件已经冒泡到“更高级别”元素。不可能再停止传播到此元素(因为它已经发生)。只能在层次结构中更高的元素停止传播。如果您已将委托绑定到“文档”,则根本不起作用。