javascript - jquery .delegate 和动态内容

Question

我必须遵循 HTML:

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

</ul>

“liclass”类中的每个 li 上都有一个点击事件，因此我使用以下命令停止 anchor 冒泡(大概 <div> 在 .liclass 内部):

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

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

Answer 1

将另一个委托(delegate)处理程序放置在包含动态创建元素的任何位置(在本例中为 ul)，以停止传播。

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

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

因为它们都是同一元素上的委托(delegate)方法，所以即使事件已经冒泡，e.stopPropagation() 也应该能够阻止处理程序。

<强> JSFIDDLE DEMO

更新了演示以展示其如何使用动态元素。

<小时/>

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

因此，如果您使用 .load()，我假设您正在清除旧内容并用新内容替换它。在这种情况下，在回调中，只需选择 div，然后重新绑定(bind)处理程序。

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