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

时间:2012-08-23 09:17:56

标签: javascript javascript-events jquery

我一直在尝试使用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您必须先点击链接创建元素。一旦你完成了这个,理论就是相同的脚本可以工作,但事实并非如此。我对这种方法缺少什么?

5 个答案:

答案 0 :(得分:5)

当动态添加项目时,您应该将处理程序附加到肯定会在那里的最近的父项 - 在您的情况下,这是body。您可以使用on() this way to achieve a functionality过去提供的delegate()

  
    

$( selector-for-parent )。on( events selector-for-dynamic-children handler < / em>的);

  

所以你的代码改写就是这样:

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

我使用e.target来查找实际触发事件的元素。在这种情况下,我通过检查项目是否具有container类来识别该项目。

jsFiddle Demo

答案 1 :(得分: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()'

答案 2 :(得分:2)

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

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

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

更新了小提琴here

答案 3 :(得分:2)

The demo.

将事件处理程序绑定到元素时使用.on,绑定的目标必须存在于domcument中。

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

答案 4 :(得分:1)

根据jQuery.on()的文档:

  

事件处理程序仅绑定到当前选定的元素;他们   在您的代码调用.on()时页面上必须存在。

您必须将事件绑定到父容器。也许像THIS