javascript - 在动态元素上使用 .on() 和 e.stopPropagation()

Question

我一直在尝试使用 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您必须首先单击链接以创建元素的位置。完成此操作后，理论上相同的脚本会起作用，但实际上不起作用。这种方法我缺少什么？

Answer 1

当项目被动态添加时，您应该将处理程序附加到最近的肯定会在那里的父级 - 在您的情况下，这是 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 类来识别该项目。

jsFiddle Demo