jquery .delegate和动态内容

我必须遵循HTML：

 
 ...some more nesting https://stackoverflow.com/questions/8375574/jquery-delegate-and-dynamic-content/somelink ....close nesting 
 
 ...  

从“liclass”类中的每个li上都有一个click事件，所以我停止从锚点冒泡（大概是

在.liclass中）：

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

现在我用Ajax

添加更多

。 stopPropagation适用于静态“.liclass”，但不适用于动态添加。 假设加载页面时

的代码存在。 你可以告诉我如何更改.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

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