当前位置：文江博客话题详情

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

发布于 2024-12-14 04:47:12 字数 120 浏览 1 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吾性傲以野 2024-12-21 04:47:12

docs 中非常清楚为什么您不想使用 live。另外，正如 Felix 所提到的，.on 是一种更简化的附加事件的方式。

以后不再推荐使用.live()方法
jQuery 的版本提供了更好的方法，而它没有
缺点。特别是在使用过程中会出现以下问题：
.live():
jQuery 在调用 .live() 方法之前尝试检索选择器指定的元素，这可能是
处理大型文档非常耗时。
不支持链接方法。例如，$("a").find(".offsite, .external").live( ... ); 是
无效并且无法按预期工作。
由于所有 .live() 事件都附加在 document 元素上，因此事件花费的时间最长且最慢
在处理它们之前可能的路径。
调用event.stopPropagation()
在事件处理程序中对于停止事件处理程序无效
附在文件下方；该事件已经传播到
文档。
.live() 方法以令人惊讶的方式与其他事件方法交互，例如：
$(document).unbind("click") 删除所有点击处理程序
通过对 .live() 的任何调用附加！

回复收藏 0 原文

网名女生简单气质 2024-12-21 04:47:12

人们从 .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() 之前页面上存在任何祖先元素，它就可以工作。

文档中对此进行了解释，但很容易被忽略。

One difference that people stumble on when moving from .live() to .on() is that the parameters for .on() are slightly different when binding events to elements added dynamically to the DOM.

Here's an example of the syntax we used to use with the .live() method:

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

function doSomething() {
    // do something
}

Now with .live() being deprecated in jQuery version 1.7 and removed in version 1.9, you should use the .on() method. Here's an equivalent example using the .on() method:

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

Please note that we're calling .on() against the document rather than the button itself. We specify the selector for the element whose events we're listening to in the second parameter.

In the example above, I'm calling .on() on the document, however you'll get better performance if you use an element closer to your selector. Any ancestor element will work so long as it exists on the page before you call .on().

This is explained here in the documentation but it is quite easy to miss.

回复收藏 0 原文

就像说晚安 2024-12-21 04:47:12

请参阅官方博客

[..]新的 .on() 和 .off() API 统一了所有附加方式
在 jQuery 中将事件发送到文档 - 而且输入起来更短！[...]

回复收藏 0 原文

风铃鹿 2024-12-21 04:47:12

.live()

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

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

此

.on()

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

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

.live()

This method is used to attach an event handler for all elements which match the current selector, now and in the future.

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

and

.on()

This method is used to attach an event handler function for one or more events to the selected elements below is the example.

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

回复收藏 0 原文

掩于岁月 2024-12-21 04:47:12

关于在线与实时之间差异的好教程

从上面的链接

.live() 有什么问题
以后不再推荐使用.live()方法
jQuery 的版本提供了更好的方法，而它没有
缺点。特别是在使用过程中会出现以下问题：
.live():
jQuery 尝试检索选择器指定的元素
在调用 .live() 方法之前，这可能会很耗时
大文档。
不支持链接方法。例如，
$(“a”).find(“.offsite,.external”).live( … );无效并且确实
不按预期工作。
由于所有 .live() 事件都附加在
文档元素，事件采用最长且最慢的路径
在处理它们之前。
在事件中调用 event.stopPropagation()
处理程序在停止附加在较低位置的事件处理程序方面无效
文件；该事件已传播到文档。
该
.live() 方法与其他事件方法交互的方式可以是
令人惊讶的是，例如 $(document).unbind(“click”) 删除所有点击
通过调用 .live() 附加处理程序！

回复收藏 0 原文

油饼 2024-12-21 04:47:12

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

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

for more info check it out.. .live() and .on()

.live() method is used when you deal with the dynamic generation of contents... like I have created on program that adds a tab when i change the value of a Jquery Slider and I want to attach the close button functionality to every tabs which will generated... the code i have tried is..

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

and it works preety much cool...

回复收藏 0 原文