jQuery on（）：奇怪的行为

此代码适用于我的网站：

$(function(){ $('.link-follow-stop').on('click', function(event){ console.log('|||'); return false; }); }); 

但这不是：

 $(function(){ $(document).on('click', '.link-follow-stop', function(event){ console.log('|||'); return false; }); }); 

我在我的网站上运行第二个代码示例时没有看到任何错误，但是当我点击.link-follow-stop链接时， console.log调用不会触发。

我尝试在jsFiddle上运行第二个代码示例，它的运行方式与我预期的一样。 有什么不对？

与类’link-follow-stop’的链接是静态的（我的意思是不是动态的）。

Answer 1

如果在包含.link-follow-stop的元素上有一个单击处理程序，并且它使用e.stopPropagation() ，这将阻止事件冒泡到document 。 .on()的第二种forms取决于冒泡到该处理程序绑定的元素的事件; 然后它检查事件的实际目标是否与选择器匹配。

以下说明了这一点：

 
 
 Click here 
 
 $(function() { $(document).on("click", ".inner", function() { alert("inner"); }); $(".outer").click(function(e) { e.stopPropagation(); alert("outer"); }); }); 

小提琴

使用.on()委托时， .on()处理程序绑定到包含动态元素的最具体的静态元素。 这可以最大限度地降低另一个处理程序干扰和防止冒泡的风险。