8

我一直在尝试使用stopPropagation().

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

这是一个 jsFiddle 设置来演示它的功能。当您单击白框外的任何位置时，应触发警报。

现在，我试图将相同的原则应用于动态创建的元素。据我了解，on()jQuery 中的事件分配方法应该允许它在不更改脚本的情况下运行。

这是第二个 jsFiddle，您必须首先单击链接来创建元素。完成此操作后，理论上相同的脚本将起作用，但事实并非如此。我对这种方法缺少什么？

4

5 回答 5

7

当项目被动态添加时，您应该将处理程序附加到肯定会存在的最近的父级 - 在您的情况下，这是body. 您可以使用on()这种方式来实现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 演示

于 2012-08-23T09:22:44.710 回答
5

简而言之，您需要添加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?");    
})​

代码：http: //jsfiddle.net/GsLtN/5/

有关更多详细信息，请查看官方网站上“直接和委托事件”部分的“.on() ”

于 2012-08-23T09:23:42.527 回答
2

您需要将 绑定.on()到父级。

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

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

在这里更新小提琴

于 2012-08-23T09:22:22.980 回答
2

演示。

当您将事件处理程序绑定到元素 use.on时，您绑定的目标必须存在于文档中。

$('body').on('click', '.container > *', function(e){
  e.stopPropagation();    
});
$('body').on("click",'.container',function(){
  alert("outside the box?");    
})​
于 2012-08-23T09:23:43.853 回答
1

根据以下文档jQuery.on()：

事件处理程序仅绑定到当前选定的元素；当您的代码调用.on().

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

于 2012-08-23T09:24:33.990 回答