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