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

FIDDLE

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

jQuery on（）：奇怪的行为

1 个答案: