jQuery .live() 与 .bind()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2690370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
.live() vs .bind()
提问by Pranay Rana
I want to know the main difference between
我想知道两者之间的主要区别
.live()vs. .bind()
.live()对比 .bind()
methods in jQuery.
jQuery 中的方法。
回答by RaYell
The main difference is that livewill work also for the elements that will be created after the page has been loaded (i.e. by your javascript code), while bindwill only bind event handlers for currently existing items.
主要区别在于它live也适用于将在页面加载后创建的元素（即通过您的 javascript 代码），而bind只会为当前存在的项目绑定事件处理程序。
// BIND example
$('div').bind('mouseover', doSomething);
// this new div WILL NOT HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');
// LIVE example
$('div').live('mouseover', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');
Update:
更新：
jQuery 1.7 deprecated live()method and 1.9 has removed it. If you want to achieve the same functionality with 1.9+ you need to use a new method on()which has slightly different syntax as it's invoked on document object and the selector is passed as a parameter. Therefor the code from above converted to this new way of binding events will look like this:
jQuery 1.7 已弃用live()方法，1.9 已将其删除。如果您想使用 1.9+ 实现相同的功能，您需要使用一种新方法on()，该方法的语法略有不同，因为它是在文档对象上调用的，并且选择器作为参数传递。因此，上面转换为这种新的绑定事件方式的代码将如下所示：
// ON example
$(document).on('mouseover', 'div', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');
回答by Watermark Studios
I did a statistical analysis of .bind()vs .live()vs .delegate()using FF profiler. I did 10 rounds of each (not a sufficient sample to be definitive, but illustrates the point). These are the results.
我使用 FF 分析器对.bind()vs .live()vs.delegate()进行了统计分析。我做了 10 轮每轮（不是一个足够的样本来确定，但说明了这一点）。这些是结果。
1) Single static element with an id using the click event:
1) 使用单击事件具有 id 的单个静态元素：
.bind(): Mean = 1.139ms, Variance = 0.1276ms
.live(): Mean = 1.344ms, Variance = 0.2403ms
.delegate(): Mean = 1.290ms, Variance = 0.4417ms
2) Multiple static elements with a common class using the click event:
2) 多个具有公共类的静态元素使用 click 事件：
.bind(): Mean = 1.089ms, Variance = 0.1202ms
.live(): Mean = 1.559ms, Variance = 0.1777ms
.delegate(): Mean = 1.397ms, Variance = 0.3146ms
3) Multiple dynamic elements (first button creates second...) using the click event:
3）多个动态元素（第一个按钮创建第二个...）使用点击事件：
.bind(): Mean = 2.4205ms, Variance = 0.7736ms
.live(): Mean = 2.3667ms, Variance = 0.7667ms
.delegate(): Mean = 2.1901ms, Variance = 0.2838ms
Interpret how you wish, but it seems to me that as dynamic elements increase on a page, .delegate() seems to have the best performance while static elements perform best with .bind().
解释您的意愿，但在我看来，随着页面上动态元素的增加，.delegate() 似乎具有最佳性能，而静态元素使用 .bind() 性能最佳。
Keep in mind that I am using a very simple click event triggering an alert. Different pages, with different environments (ie. CPU, multi-tab browsing, running threads, etc) will render differing results. I used this as a basic guideline for my decision to use one or the other. Please advise if you have come up with a different result.
请记住，我正在使用一个非常简单的点击事件来触发警报。不同页面、不同环境（即 CPU、多标签浏览、运行线程等）将呈现不同的结果。我用它作为我决定使用其中一个的基本指南。如果您得出不同的结果，请告知。
Thanks!
谢谢！
回答by jAndy
You should consider to use .delegate()instead of .live()whereever possible.
Since event delegation for .live()always targets the body/document and you're able to limit
"bubbling" with .delegate().
您应该考虑使用.delegate()而不是.live()尽可能使用。由于事件委托.live()始终针对正文/文档，因此您可以使用.delegate().
UPDATE
更新
From jQuery:
来自jQuery：
As of jQuery 1.7,
.delegate()has been superseded by the.on()method. For earlier versions, however,.delegate()remains the most effective means to use event delegation.
从 jQuery 1.7 开始，
.delegate()已被该.on()方法取代。然而，对于早期版本，.delegate()仍然是使用事件委托的最有效方法。
回答by andyzinsser
As of v1.7, .live, .bind, and .delegate have all been replaced by .onhttp://api.jquery.com/on/
从 v1.7 开始，.live、.bind 和 .delegate 都被http://api.jquery.com/on/取代.on
I was curious of the diffence myself, so I wrote up an article with some code examples. http://blog.tivix.com/2012/06/29/jquery-event-binding-methods/.
我自己很好奇这种差异，所以我写了一篇文章，里面有一些代码示例。 http://blog.tivix.com/2012/06/29/jquery-event-binding-methods/。
Sounds like depending upon how you call .on(), jquery will mimic .bind, .live, or .delegate. This gives your event handlers a more elegant implementation.
听起来取决于你如何调用 .on()，jquery 会模仿 .bind、.live 或 .delegate。这为您的事件处理程序提供了更优雅的实现。
