我一直在尝试使用 stopPropagation()
捕获元素外部的点击事件。
$(".container").children().on('click',function(e){
e.stopPropagation();
});
$(".container").on("click",function(){
alert("outside the box?");
})
Here is a jsFiddle set up to demonstrate it functioning .当您点击白框外的任何地方时,应该会触发警报。
现在,我正尝试将相同的原则应用于动态创建的元素。据我所知,jQuery 中事件分配的 on()
方法应该允许它在不更改脚本的情况下运行。
Here is a second jsFiddle您必须首先单击链接以创建元素的位置。完成此操作后,理论上相同的脚本会起作用,但实际上不起作用。这种方法我缺少什么?
最佳答案
当项目被动态添加时,您应该将处理程序附加到最近的肯定会在那里的父级 - 在您的情况下,这是 body
。您可以使用 on()
this way to achieve a functionality那delegate()
用于提供:
$(selector-for-parent).on(events, selector-for-dynamic-children, handler);
所以你重写的代码将简单地是这样的:
$("body").on('click', '.container', function(e){
var $target = $(e.target);
if ($target.hasClass('container')) {
alert("outside the box!");
}
});
我用了e.target
查找哪个元素实际触发了事件。在这种情况下,我通过检查它是否具有 container
类来识别该项目。
关于javascript - 在动态元素上使用 .on() 和 e.stopPropagation(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12088460/