jQuery .live（）和.on（）

Question

有什么区别我发现jQuery 1.7中有一个新方法.on()替代了早期版本中的.live()。

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

Answer 1

这很清楚在docs为什么你不想使用现场。同样如Felix所述，.on是附加事件的更简化的方式。不再推荐

使用.live（）方法，因为后来 版本的jQuery的报价不具有其 缺点更好的方法。调用.live()方法，其可以是 费时大型文档之前

• jQuery的尝试检索由选择器指定的要素：具体地讲，下面的问题与使用 .live（）的出现。
• 不支持链接方法。例如，$("a").find(".offsite, .external").live(...);是 不是有效，并且不按预期工作。
• 由于所有.live()事件都附加在document元素上，因此事件在处理它们之前会采用最长和最慢的可能路径。
• 在事件处理程序中调用event.stopPropagation() 无法在停止附加在文档中较低位置的事件处理程序 ;该事件已经传播到 document。
• 的.live()方法与其他事件方法的方式，可奇怪的，例如交互， $(document).unbind("click")删除任何呼叫连接到.live()所有点击处理 ！

Answer 2

见official Blog

[..]新的。对（）和.off（）API的统一jQuery中安装 事件到文档的所有方式 - 他们是更短的输入[...]

Answer 3

Good tutorial on difference between on vs live

从上面的链接引用

什么是错的.live（）

使用.live（）方法不再因为后来 推荐jQuery版本提供了更好的方法，没有 的缺点。

1. jQuery的尝试检索调用之前由选择 指定的要素：具体地讲，下面的问题与使用 .live（）的出现。live（）方法，这可能会耗费大量文档的时间。
2. 不支持链接方法。例如， $（“a”）。find（“。offsite，.external”）。live（...）;无效，并且 无法按预期工作。
3. 由于所有.live（）事件都附加在文档元素 上，因此事件在处理之前会采用最长和最慢的可能路径 。
4. 在事件 中调用event.stopPropagation（）处理程序在停止附加在文档 较低处的事件处理程序时无效;该事件已经传播到文档。
5. 的 .live（）方法与方式与其他事件的方法，可以是 令人吃惊，例如，$（文件）.unbind（“点击”）将删除所有单击任何呼叫连接到.live 处理程序进行交互（） ！

Answer 4

我是一个Chrome扩展"Comment Save"它使用jQuery和其中一个用于.live()的作者。扩展工作的方式是通过将侦听器附加到所有使用的textareas。 live() - 这种方式运行良好，因为每当文档发生变化时它仍会将侦听器附加到所有新的textareas。

我搬到了.on()但它不工作。只要文档发生变化，它就不会附加监听器 - 所以我已恢复为使用.live()。这是我在.on()中的一个错误。我想，请小心一点。

Answer 5

从.live()移动到.on()时，人们偶然发现的一个区别是，将事件绑定到动态添加到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()对文档，而不是按钮本身。我们在第二个参数中为正在侦听的事件指定元素的选择器。

在上面的示例中，我在文档上调用了.on()，但是如果使用更靠近选择器的元素，则会获得更好的性能。任何祖先元素只要在页面上存在，就会在您致电.on()之前工作。

这是解释here in the documentation但它很容易错过。

Answer 6

我有一个要求，以确定浏览器关闭事件。在做研究之后，我正在使用jQuery 1.8。3

1. 打开使用超链接被点击

   $（ 'A'）时，以下的jQuery的标志生活（ '点击'，函数（）{cleanSession = FALSE;}）;

2. 转到ON使用以下jQuery的一个标志时提交的任何时间输入按钮类型被点击

$（ “输入[类型=提交]”）。住（ '点击'，（）的函数{alert（'input button clicked'）; cleanSession = false;}）;

1. 打开使用以下jQuery的时候随时形式提交标志发生

$（ '形式'）生活（ '提交'，函数（）{cleanSession = FALSE;}）;

现在重要的事情......我的解决方案只有在我使用.live代替.on时才有效。如果我使用.on，那么在表单提交后，事件就会被解雇，而这太迟了。很多时候我的表单都是使用javascript调用提交的（document.form.submit）

因此，.live和.on之间有一个关键区别。如果您使用.live的事件被立即触发，但如果您切换到。对不能准时

Answer 7

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

.live（）方法当你处理内容的动态生成......就像我在程序中创建的那样，当我更改Jquery Slider的值时添加一个选项卡，并且我想将关闭按钮功能附加到每个将生成的选项卡上...我曾尝试代码..

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

和它的作品preety很多很酷...

Answer 8

.live() 

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

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

和

.on() 

该方法用于连接一个事件处理函数的一个或多个事件，以低于所选定的元素是示例。

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