delegate和动态内容

jquery .delegate and dynamic content

本文关键字：动态 delegate      更新时间：2023-09-26

我必须遵循以下HTML:

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

在类"liclass"的每个li上都有一个单击事件，所以我用(大概<div>在.liclass内部)来阻止锚的冒泡:

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

现在我添加更多的<li class="liclass">与Ajax .load。stopPropagation适用于static。但不适合动态添加。假设加载页面时<ul class="ulclass">的代码在那里。你能让我知道如何改变。委托，以停止冒泡为动态添加。liclass。

将另一个委托处理程序放置在包含动态创建的元素(在本例中为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()也应该阻止处理程序。

<<p> JSFIDDLE演示/strong>

更新了演示，以显示它可以与动态元素一起工作

另一种选择是简单地将处理程序直接绑定到动态创建的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);
});

您需要在每个ajax请求完成后调用".delegate"才能使其工作

如果你使用的是最新版本的jQuery，正确的代码应该是:

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

事件委托的意思是:事件已经冒泡到一个"更高级别"的元素。不可能再停止对该元素的传播(因为它已经发生了)。只有在层次结构中更高的元素才能停止传播。如果你已经将委托绑定到"document"，它将根本不起作用。

相关文章：