jquery - jQuery on()：奇怪的行为

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;
    });
});

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

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

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

Answer 1

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

下面演示了这一点：

<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");
    });
});

小提琴

当您委托时，.on()您应该将处理程序绑定到包含动态元素的最具体的静态元素。这将另一个处理程序干扰和防止冒泡的风险降至最低。