3

我看到越来越多的开发人员现在使用$('#element-id').on()方法而不是$('#element-id').live()方法。

为什么？该live方法没有什么？

4

3 回答 3

7

绑定的事件处理程序绑定.live到document. 绑定的事件处理程序绑定.on到您指定的元素。.live这意味着您可以减少事件冒泡到将接收它的元素所花费的时间，这也意味着您可以停止传播（因为它已经到达文档，所以不可能）。

该.on方法还允许您对所有事件处理程序使用单一方法 -.live将始终委托事件处理程序，而.on仅在您将选择器作为第二个参数传递时才会委托。如果没有，它将绑定到匹配的元素集。

jQuery 文档中列出了更多缺点：

  • jQuery 会在调用方法之前尝试检索选择器指定的元素.live()，这在大型文档上可能会很耗时。

  • 不支持链接方法。例如， $("a").find(".offsite, .external").live( ... );无效且无法按预期工作。

  • 由于所有.live()事件都附加在文档元素上，因此事件在处理之前会采用最长和最慢的路径。

  • 在移动 iOS（iPhone、iPad 和 iPod Touch）上，对于大多数元素，点击事件不会冒泡到文档正文，并且不能与.live()...

  • 调用event.stopPropagation()事件处理程序在停止附加在文档下方的事件处理程序方面是无效的；该事件已经传播到文档。

  • 该.live()方法以令人惊讶的方式与其他事件方法交互，例如，$(document).unbind("click")删除所有通过调用.live()!

由于所有这些原因，您应该始终使用.on()而不是.live(). 如果您卡在旧版本的 jQuery（低于 1.7）上，您可以.delegate()改用。

旁注- 所有事件绑定方法都在后台调用，因此用于所有事件处理需求.on()是有意义的。.on()不要为诸如.click();之类的快捷方式烦恼。您可以从1.7.2 源代码中看到，他们所做的只是调用.on：

return arguments.length > 0 ? this.on(name, null, data, fn) : this.trigger(name);
于 2012-09-04T12:24:39.077 回答
0

完整答案：http ://www.jquery4u.com/jquery-functions/on-vs-live-review/#.UEXy7NZSskU

短读：

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

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

另外，请记住 .on() 函数仅包含在 jQuery 1.7 中，它不适用于早期版本。

于 2012-09-04T12:26:59.113 回答
0

首先，live() 从 jQuery 1.7 开始，该方法已被弃用，您应该开始逐步淘汰其在代码中的使用。使用此方法不正确支持链式。

有一篇很好的文章比较jQuery .bind() , .live() , .delegate() , .on()

http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

于 2012-09-04T12:28:44.053 回答