85

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

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

4

8 回答 8

99

在文档中很清楚为什么您不想使用 live。也正如 Felix 所提到的，.on是一种更简化的附加事件的方式。

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

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

人们在从.live()to移动时偶然发现的一个区别是，将事件绑定到动态添加到 DOM 的元素时.on()，参数略有不同。.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().

这在文档中进行了解释，但很容易错过。

于 2013-09-17T20:54:19.353 回答
4

见官方博客

[..]新的 .on() 和 .off() API 统一了在 jQuery 中将事件附加到文档的所有方式——它们的输入时间更短！[...]

于 2011-11-07T21:06:24.283 回答
2 
.live()

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

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

和

.on()

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

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});
于 2016-06-14T12:46:54.637 回答
1

关于直播与直播之间区别的好教程

从上面的链接引用

.live() 有什么问题

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

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

我是一个使用 jQuery 的 Chrome 扩展“评论保存”的作者，一个使用.live(). 扩展的工作方式是使用 . live()- 这很有效，因为每当文档更改时，它仍然会将侦听器附加到所有新的文本区域。

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

于 2013-01-01T00:03:18.110 回答
0

欲了解更多信息，请查看.. .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" );
        });

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

于 2014-06-27T06:39:26.763 回答
-1

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

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

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

  2. 任何时候单击提交的输入按钮类型时，使用以下 jQuery 打开一个标志

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

  1. 每当表单提交发生时，使用以下 jQuery 打开一个标志

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

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

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

于 2014-03-25T16:01:38.207 回答