jQuery .live()和.on()之间有什么区别

Question

我看到.on()jQuery 1.7中有一个新方法取代了.live()早期版本.

我很想知道它们之间的区别以及使用这种新方法的好处.

Answer 1

在文档中很清楚为什么你不想使用live.同样如Felix所提到的,.on是一种更简化的附加事件的方式.

不再推荐使用.live()方法,因为更高版本的jQuery提供了更好的方法,没有它的缺点.特别是,使用.live()会出现以下问题:

• jQuery在调用.live()方法之前尝试检索选择器指定的元素,这在大型文档上可能很耗时.
• 不支持链接方法.例如,$("a").find(".offsite, .external").live( ... ); 是 不是有效,并且没有按预期工作.
• 由于所有.live()事件都附加在document元素上,因此事件在处理之前需要最长和最慢的路径.
• 调用event.stopPropagation() 事件处理程序对于停止附加在文档中较低位置的事件处理程序是无效的; 该事件已经传播到 document.
• 该.live()方法以令人惊讶的方式与其他事件方法交互,例如, $(document).unbind("click")删除通过任何调用附加的所有点击处理程序.live()!

Answer 2

人们从移动时的蹒跚一个区别.live()来.on()是为参数.on()绑定事件动态添加到DOM元素时略有不同.

以下是我们用于该.live()方法的语法示例:

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

现在,.live()在jQuery 1.7版中被弃用并在1.9版中删除,您应该使用该.on()方法.这是使用该.on()方法的等效示例:

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

请注意,我们正在调用.on()文档而不是按钮本身.我们为第二个参数中正在侦听其事件的元素指定选择器.

在上面的示例中,我正在调用.on()文档,但是如果使用更接近选择器的元素,则会获得更好的性能.只要在调用之前页面上存在任何祖先元素,它就会起作用.on().

这在文档中有解释,但很容易错过.