jQuery on() : strange behaviour

Question

此代码适用于我的网站:

$(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()，这将阻止事件冒泡最多文档。 .on() 的第二种形式取决于事件冒泡到该处理程序所绑定(bind)到的元素；然后它检查事件的实际目标是否与选择器匹配。

以下内容演示了这一点:

<div class="outer">
    <div class="inner">
        Click here
    </div>
</div>

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

FIDDLE

当您使用 .on() 进行委托(delegate)时，您应该将处理程序绑定(bind)到包含动态元素的最具体的静态元素。这可以最大限度地减少其他处理程序干扰和阻止冒泡的风险。