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

我发现jQuery 1.7中有一个新的方法.on()replace了早期版本中的.live()

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

在文档中为什么不想使用live很明显。 也正如费利克斯所提到的, .on是一种更加简化的附加事件的方式。

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

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

当从.live()移动到.on()时,人们所遇到的一个不同之处在于,当将事件绑定到dynamic添加到DOM的元素时, .on()的参数略有不同。

以下是我们用于.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()而不是button本身 。 我们在第二个参数中为正在侦听的事件指定元素的select器。

在上面的示例中,我在文档中调用.on() ,但是如果使用更接近select器的元素,则会获得更好的性能。 在调用.on()之前,任何祖先元素都可以在页面上存在的情况下工作。

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

看官方博客

新的.on()和.off()API统一了在jQuery中将事件附加到文档中的所有方法 – 而且它们缩短了input的时间![…]

 .live() 

此方法用于为现在和将来与当前select器匹配的所有元素附加事件处理程序。

 $( "#someid" ).live( "click", function() { console.log("live event."); }); 

 .on() 

此方法用于将一个或多个事件的事件处理函数附加到下面选定的元素上。

 $( "#someid" ).on( "click", function() { console.log("on event."); }); 

很好的教程,关于与现场的区别

从上面的链接引用

.live()有什么问题

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

  1. jQuery尝试在调用.live()方法之前检索由select器指定的元素,这在大型文档上可能非常耗时。
  2. 链接方法不受支持。 例如,$(“a”)。find(“。offsite,.external”)。live(…); 无效并且不能按预期工作。
  3. 由于所有.live()事件都附加在文档元素处,因此事件在处理之前会采用最长和最慢的path。
  4. 在事件处理程序中调用event.stopPropagation()在停止附加在文档中较低位置的事件处理程序时无效; 该事件已经传播到文件。
  5. .live()方法与其他事件方法以令人惊讶的方式进行交互,例如,$(document).unbind(“click”)将删除通过调用.live()附加的所有点击处理程序!

更多的信息检查出来.. .live()和.on()

.live()方法用于处理内容的dynamic生成…就像我在程序中创build的那样,当我更改Jquery Slider的值时添加了一个选项卡,并且我想将closuresbuttonfunction附加到每个选项卡这将生成…我试过的代码是..

 var tabs = $('#tabs').tabs(); // live() methos attaches an event handler for all //elements which matches the curren selector $( "#tabs span.ui-icon-close" ).live( "click", function() { // fetches the panelId attribute aria-control which is like tab1 or vice versa var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" ); $( "#" + panelId ).remove(); tabs.tabs( "refresh" ); }); 

它的工作原理非常酷…

我是使用jQuery的Chrome扩展“Comment Save”的作者,以及使用.live() 。 扩展工作的方式是通过将侦听器附加到所有的textareas使用。 live() – 这个工作很好,因为每当文档改变它仍然将监听器附加到所有新的textareas。

我搬到.on()但它不工作。 只要文档发生变化,它就不会附加监听器 – 所以我已经恢复使用.live() 。 这是我在.on()一个错误。 只是要小心,我猜。

我有一个要求确定浏览器closures的事件。 在做研究之后,我正在使用jQuery 1.8.3

  1. 当点击超链接时,使用下面的jQuery打开一个标志

    $('a')。live('click',function(){cleanSession = false;});

  2. 点击提交的任何时间inputbuttontypes时,使用以下jQuery打开一个标志

$(“input [type = submit]”)。live('click',function(){alert('input button clicked'); cleanSession = false;});

  1. 任何时间提交时,使用下面的jQuery打开一个标志

$('form')。live('submit',function(){cleanSession = false;});

现在重要的是…我的解决scheme只有在我使用.live而不是.on时才有效。 如果我使用。然后事件被炒作后表单被提交,这是为时已晚。 很多时候我的表单被提交使用javascript调用(document.form.submit)

所以.live和.on之间有一个关键的区别。 如果你使用.live你的事件会立即被解雇,但如果你切换到.on它不会被按时发射