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

从.live()移动到.on()时，人们偶然发现的一个区别是，当将事件绑定到动态添加到DOM的元素时，.on()的参数会略有不同。

以下是我们过去常用于.live()方法的语法示例：

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

function doSomething() {
    // do something
}

现在，在jQuery 1.7版中不推荐使用.live()，在版本1.9中删除了.on()，您应该使用.on()方法。以下是使用$(document).on('click', 'button', doSomething); function doSomething() { // do something }方法的等效示例：

.on()

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

在上面的例子中，我在文档上调用了.on()，但是如果你使用更靠近选择器的元素，你将获得更好的性能。只要在调用{{1}}之前页面上存在任何祖先元素，它就会起作用。

这解释为here in the documentation，但很容易错过。

Answer 3

请参阅official Blog

[..]新的.on（）和.off（）API统一了所有附加方式事件到jQuery中的文档 - 它们的类型更短！[...]

Answer 4

.live()

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

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

和

.on()

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

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

Answer 5

Good tutorial on difference between on vs live

从以上链接引用

.live（）
有什么问题
以后不再推荐使用.live（）方法   jQuery的版本提供了更好的方法，没有它   缺点。特别是，使用时会出现以下问题   .live（）：


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

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

由于所有.live（）事件都附加在   文档元素，事件采用最长和最慢的路径   在他们处理之前。

在事件中调用event.stopPropagation（）   处理程序无法阻止附加在其中的事件处理程序   文件;该事件已经传播到文档。

的   .live（）方法以可能的方式与其他事件方法交互   令人惊讶的是，例如，$（document）.unbind（“click”）删除所有点击   通过调用.live（）！
附加的处理程序

Answer 6

我是使用jQuery的Chrome扩展程序"Comment Save"的作者，使用.live()的作者。扩展的工作方式是使用。live()将侦听器附加到所有textareas - 这很有效，因为每当文档发生更改时，它仍会将侦听器附加到所有新的textareas。

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

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

它的工作非常酷......

Answer 8

我要求识别浏览器已关闭的事件。在做了研究后，我正在使用jQuery 1.8.3

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

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

$（＆＃34;输入[type = submit]＆＃34;）。live（＆＃39;点击＆＃39;，功能（）{alert（＆＃39;输入按钮点击＆＃39;）; cleanSession = FALSE;}）;

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

$（＆＃39; form＆＃39;）。live（＆＃39; submit＆＃39;，function（）{cleanSession = false;}）;

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

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

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

8 个答案: