Question

我必须遵循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的冒泡。

Answer 1

在包含动态创建的元素的任何内容上放置另一个委托处理程序，在本例中为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);
});

Answer 2

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

Answer 3

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

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

Answer 4

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

jquery .delegate和动态内容

4 个答案: