Javascript 在动态元素上使用.on（）和e.stopPropagation（）

我一直在尝试使用

stopPropagation（）

捕获元素外部的点击事件

。当您单击白框之外的任何位置时，应发出警报

现在，我尝试将相同的原则应用于动态创建的元素。据我所知，jQuery中事件分配的

on（）

方法应该允许它在不更改脚本的情况下运行

---

必须首先单击链接才能创建图元。一旦你做到了这一点，理论是相同的脚本将工作，但它没有。此方法缺少什么？

您需要将

.on（）

绑定到父级

您试图做的是-将处理程序绑定到侦听事件的父级，然后检查事件是否由与该选择器匹配的元素触发

$("body").on("click", '.container',function(){
  alert("outside the box?");    
})​

---

更新的fiddle

动态添加项目时，您应该将处理程序附加到最接近的父项，该父项肯定会在那里-在您的情况下，这是

body

。您可以使用用于提供以下服务的：

$（父级选择器）.on（事件、动态子级选择器、处理程序）

因此，重写的代码将是：

$("body").on('click', '.container', function(e){
    var $target = $(e.target);
    if ($target.hasClass('container')) {
        alert("outside the box!");
    }
});

我过去常常发现是哪种元素触发了事件。在本例中，我通过检查项目是否具有

容器

类来识别项目

---

简而言之，您需要在现有父元素上放置

on（）

，以使其工作：

$('body').on('click', 'a', function(e){
    e.preventDefault();
    $('<div class="container"><div class="box"></div></div>').appendTo('body');
    $(this).remove();
});

$('body').on('click', '.container > *', function(e){
  e.stopPropagation();    
});

$('body').on('click', '.container', function(){
  alert("outside the box?");    
})​

$（'body'）。在（'click'，'a'，函数（e）上{
e、 预防默认值（）；
$（''）。附于（'正文'）；
$（this.remove（）；
});
$（'body'）。在（'click'，'container>*'上，函数（e）{
e、 停止传播（）；
});
$（'body'）。在（'click'，'container'，function（）上{
警惕（“盒子外？”）；
})​

代码：

有关更多详细信息，请访问官方网站的“直接和委托活动”部分

将事件处理程序绑定到元素时，请使用。在上，绑定到的目标必须存在于DOMCOMENT中

$('body').on('click', '.container > *', function(e){
  e.stopPropagation();    
});
$('body').on("click",'.container',function(){
  alert("outside the box?");    
})​

---

根据以下文件：

事件处理程序仅绑定到当前选定的元素；他们 在代码调用

.on（）

时，页面上必须存在

---

您必须将事件绑定到父容器。可能是这样的。

当场。很少解释为什么会令人敬畏。@MildFuzz:请看我的答案。没有看到这个答案，他一定是在几秒钟前击中了柱子。无论如何，这是否意味着我不能删除事件绑定？我总是喜欢清理绑定以避免内存耗尽。@MildFuzz您仍然可以使用

.off（）

。很好的解决方案删除绑定。这是否会影响我删除绑定的能力？将事件绑定到动态元素时，我通常喜欢删除与事件的绑定，以防止内存流失。@MildFuzz如果要删除事件处理程序，可以使用

.off（）

（在本例中，当然是在

主体上
）。我通常会记录我的事件，以便更容易地删除。这意味着我附加在
click.MyNameSpace
上，而不是简单地
click
。但这里的技巧是，实际上不需要删除事件处理程序，因为它没有绑定到动态元素本身-您只需要在知道不再添加此类型的动态项时将其删除。因此，事件绑定本身不会消耗内存？@MildFuzz，无论您在
body
中插入多少
.container
元素，仍将只附加一个事件处理程序-在
主体上
。如果将处理程序附加到
.container
元素本身上，那么内存消耗会少得多，而且您不必一直附加/取消附加事件，事件委派可以为您解决所有问题。
$('body').on('click', '.container > *', function(e){
  e.stopPropagation();    
});
$('body').on("click",'.container',function(){
  alert("outside the box?");    
})​