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

我一直在尝试使用stopPropagation()捕获元素之外的点击事件。

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

这是一个jsFiddle设置来演示它的function 。 单击白框外的任何位置时，都会触发警报。

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

这是第二个jsFiddle ，您必须首先单击链接以创建元素。 一旦你完成了这个，理论是相同的脚本将起作用，但事实并非如此。 我对这种方法有什么看法？

Answer 1

简而言之，您需要在现有父元素上放置on()以使其有效：

 $('body').on('click', 'a', function(e){ e.preventDefault(); $('
').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（） ”

Answer 2

当动态添加项目时，您应该将处理程序附加到肯定会存在的最近的父项 – 在您的情况下，这是body 。 您可以使用on()这种方式来实现 delegate()用于提供的function：

$（ 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演示

Answer 3

演示。

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

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

Answer 4

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

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

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

这里更新了小提琴

Answer 5

根据jQuery.on()的文档：

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

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