jQuery .live（）和.on（）有什么区别

Question 1

我看到.on()jQuery 1.7中有一个新方法替代了.live()以前的版本。

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

Question 2

在文档中很明显，您为什么不想使用live。就像Felix提到的那样，.on是一种附加事件的更简化的方式。

不再建议使用.live（）方法，因为更高版本的jQuery提供了更好的方法，没有缺点。特别是，使用.live（）会引起以下问题：

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

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

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

调用event.stopPropagation() 事件处理程序对于停止文档底部附加的事件处理程序无效。该事件已传播到 document。

该.live()方法与其他事件方法的交互方式可能令人惊讶，例如， $(document).unbind("click")删除对.live()！的任何调用附加的所有单击处理程序。

Question 3

人们从.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()。

在文档中对此进行了解释，但是很容易遗漏。

Question 4

见官方博客

[..]新的.on（）和.off（）API统一了将事件附加到jQuery中的文档的所有方式-而且它们的键入时间更短！[...]

Question 5

.live()

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

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

和

.on()

此方法用于将一个或多个事件的事件处理函数附加到所选元素，以下是示例。

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

Question 6

关于on与live之间差异的好教程

从以上链接引用

.live（）有什么问题

不再建议使用.live（）方法，因为更高版本的jQuery提供了更好的方法，没有缺点。特别是，使用.live（）会引起以下问题：

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

不支持链接方法。例如，$（“ a”）。find（“。offsite，.external”）。live（…）; 无效，并且无法按预期工作。

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

在事件处理程序中调用event.stopPropagation（）不能有效地停止文档下部附加的事件处理程序。该事件已传播到文档。

.live（）方法与其他事件方法的交互方式可能令人吃惊，例如，$（document）.unbind（“ click”）删除任何对.live（）的调用所附加的所有单击处理程序！

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

而且很漂亮

Question 8

我是Chrome扩展“ Comment Save”的作者，该扩展使用jQuery，并且使用.live()。扩展的工作方式是使用将侦听器附加到所有文本区域。live()-这很好用，因为无论文档何时更改，它仍会将侦听器附加到所有新的文本区域。

我搬到了，.on()但效果不佳。每当文档更改时，它都不会附加侦听器-因此，我已恢复使用.live()。我猜这是一个错误.on()。我猜只是要小心一点。

Question 9

我需要识别浏览器关闭事件。在完成研究之后，我正在使用jQuery 1.8.3进行以下操作

单击超链接时，使用以下jQuery打开标志

$（'a'）。live（'click'，function（）{cleanSession = false;}）;
任何时候单击提交的输入按钮类型时，使用以下jQuery打开标志

$（“ input [type = submit]”）。live（'click'，function（）{alert（'input button clicked'）; cleanSession = false;}）;

发生任何时间表单提交时，使用以下jQuery打开标志

$（'form'）。live（'submit'，function（）{cleanSession = false;}）;

现在重要的是...我的解决方案仅在使用.live而不是.on时有效。如果我使用.on，则在提交表单后触发该事件，为时已晚。很多时候我的表单是使用javascript调用（document.form.submit）提交的

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