在动态元素上使用.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 ，您必须首先单击链接以创建元素。 一旦你完成了这个，理论是相同的脚本将起作用，但事实并非如此。 我对这种方法有什么看法？
简而言之，您需要在现有父元素上放置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（） ”
当动态添加项目时，您应该将处理程序附加到肯定会存在的最近的父项 – 在您的情况下，这是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演示
演示。
将事件处理程序绑定到元素时使用.on ，绑定到的目标必须存在于domcument中。
$('body').on('click', '.container > *', function(e){ e.stopPropagation(); }); $('body').on("click",'.container',function(){ alert("outside the box?"); })
您需要将.on()绑定到父级。
您要做的是 – 将处理程序绑定到侦听事件的父级，然后检查该事件是否由与该选择器匹配的元素触发。
$("body").on("click", '.container',function(){ alert("outside the box?"); })
这里更新了小提琴
根据jQuery.on()的文档：
事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用
.on()。
您必须将事件绑定到父容器。 也许像这样的东西。