Question

我知道版本1.7中已弃用live并在1.9中删除，不再推荐使用它。但是，当我准备面试机器测试时，我正试图在live和on之间找到区别。 Document说

在事件处理程序中调用event.stopPropagation（）无法阻止附加在事件处理程序中的事件处理程序文献;该事件已经传播到文件。

因此我尝试了这个。标记：

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

脚本：

$(document).ready(function () {
        $('span').live("click",function () {
            alert('span');
        });
        $('a').click(function () {
            alert('span a');
        });
        $('h1').click(function () {
            alert('span a h1');
            event.stopPropagation();
        });
        $('div').click(function () {
            alert('span a h1 div');
        });
    });

我使用的是Jquery 1.7版，其中live和on都存在。

发生了什么事：

live没有调用span，而是直接调用click的{{1}}。
如果我删除除a以外的所有其他事件，则会调用它。
正如医生说的那样，它正好相反，即如果我使用live

JSFiddle

Answer 1

live附加的事件处理程序始终附加到document。如果您在event.stopPropagation的回调中调用live，则此事件已经冒泡到文档，因此它对直接附加事件处理程序没有任何影响。

当事件到达event.stopPropagation()元素时，系统会调用h1，因此它永远不会到达document事件处理程序附加的live。

使用on，您可以创建jQuery支持的所有类型的事件处理。如果你看一下jQuery的来源，你可以看到在1.7中live函数只是映射到：

live: function( types, data, fn ) {
   jQuery( this.context ).on( types, this.selector, data, fn );
   return this;
}

live被删除的原因是为了使事件发生时及其被捕获的地方更清晰，更合乎逻辑。

修改

您的DOM以及您的事件处理程序所在的位置：

document $('span').live("click") **not called** (equal to: $(document).on('click', 'span') ) | div $('div').click() **not called** | h1 $('h1').click() + event.stopPropagation() **the propagation (bubbling) is stopped here not reaching the document** | a $('a').click() | span **event happens here and bubbles up**

JQuery.live（）无法正常工作

1 个答案: