Jquery live() vs 委托()

Jquery live() vs delegate()

提问by PeeHaa

I've read some posts here and elsewhere on the web about the differences between live()and delegate(). However I haven't found the answer I'm looking for (if this is a dupe please tell me).

我在这里和其他地方的了解之间的差异在网络上一些帖子live()和delegate()。但是我还没有找到我正在寻找的答案（如果这是一个骗局，请告诉我）。

I know that the difference between liveand delegateis that livecannot be used in a chain. I also read somewhere that delegateis in some cases faster (better performance).

我知道live和之间的区别delegate是live不能在链中使用。我还阅读delegate了某些情况下更快（更好的性能）的地方。

My question is, is there a situation where you should use liveinstead of delegate?

我的问题是，是否存在您应该使用live而不是使用的情况delegate？

UPDATE

更新

I've set up a simple testto see the difference in performance.

我已经设置了一个简单的测试来查看性能差异。

I've also added the new .on()which is available in jQuery 1.7+

我还添加了.on()jQuery 1.7+ 中可用的新功能

The results pretty much sum up the performance issues as stated in the answers.

结果几乎总结了答案中所述的性能问题。

• Don't use .live()unless your jQuery version doesn't support .delegate().
• Don't use .delegate()unless your jQuery version doesn't support .on().

• 不要使用.live()，除非你的jQuery的版本不支持.delegate()。
• 不要使用.delegate()，除非你的jQuery的版本不支持.on()。

The difference between .live()and .delegate()is A LOT bigger than between delegate()and .on().

.live()和之间的差异.delegate()比delegate()和之间的差异大很多.on()。

回答by lonesomeday

I never use live; I consider the benefits of using delegateto be so substantial as to be overwhelming.

我从不使用live; 我认为使用的好处delegate是如此巨大以至于难以抗拒。

The one benefit of liveis that its syntax is very close to that of bind:

的一个好处live是它的语法非常接近于bind：

$('a.myClass').live('click', function() { ... });

delegate, however, uses a slightly more verbose syntax:

delegate，但是，使用稍微冗长的语法：

$('#containerElement').delegate('a.myClass', 'click', function() { ... });

This, however, seems to me to be much more explicit about what is actually happening. You don't realise from the liveexample that the events are actually being captured on document; with delegate, it is clear that the event capturing happens on #containerElement. You can do the same thing with live, but the syntax becomes increasingly horrid.

然而，在我看来，这对实际发生的事情更为明确。您没有从live示例中意识到事件实际上是在 上捕获的document；与delegate，很明显事件捕获发生在#containerElement。你可以用 做同样的事情live，但语法变得越来越可怕。

Specifying a context for your events to be captured also improves performance. With the liveexample, every single click on the entire document has to be compared with the selector a.myClassto see if it matches. With delegate, that is only the elements within #containerElement. This will obviously improve performance.

为要捕获的事件指定上下文还可以提高性能。在这个live例子中，对整个文档的每一次点击都必须与选择器进行比较，a.myClass看看它是否匹配。与delegate，那只是 内的元素#containerElement。这显然会提高性能。

Finally, liverequires that your browser looks for a.myClasswhether or not it currently exists. delegateonly looks for the elements when the events are triggered, giving a further performance advantage.

最后，live要求您的浏览器查找a.myClass它当前是否存在。 delegate仅在触发事件时查找元素，从而提供进一步的性能优势。

---

---

NB delegateuses livebehind the scenes, so you can do anything with livethat you can do with delegate. My answer deals with them as they are commonly used.

NB在幕后delegate使用live，因此您可以live使用delegate. 我的回答涉及它们，因为它们是常用的。

Note also that neither livenor delegateis the best way to do event delegation in modern jQuery. The new syntax (as of jQuery 1.7) is with the onfunction. The syntax is as follows:

另请注意，在现代 jQuery 中，这既不是live也不delegate是进行事件委托的最佳方式。新语法（从 jQuery 1.7 开始）与on函数一起使用。语法如下：

$('#containerElement').on('click', 'a.myClass', function() { ... });

回答by user113716

They are exactly the same except:

它们完全相同，除了：

• .delegate()lets you narrow down the a local section of the page, while .live()must process events in the entire page.
• .live()starts with a wasted DOM selection

• .delegate()允许您缩小页面的局部部分，而.live()必须处理整个页面中的事件。
• .live()从浪费的 DOM 选择开始

When you call .delegate(), it just turns around and calls .live(), but passes the extra contextparameter.

当您调用 时.delegate()，它只是转过身来调用.live()，但会传递额外的上下文参数。

https://github.com/jquery/jquery/blob/master/src/event.js#L948-950

https://github.com/jquery/jquery/blob/master/src/event.js#L948-950

As such, I'd always use .delegate(). If you really need for it to process all events on the page, then just give it the bodyas the context.

因此，我总是使用.delegate(). 如果您真的需要它处理页面上的所有事件，那么只需将其body作为上下文即可。

$(document.body).delegate('.someClass', 'click', function() {
    // run handler
});

Older versions of jQuery actually have delegatefunctionality. You just need to pass a selector or element as the context property when calling .live(). Of course, it needs to be loaded on the page.

旧版本的 jQuery 实际上具有delegate功能。您只需要在调用时传递一个选择器或元素作为上下文属性.live()。当然，它需要在页面上加载。

$('.someClass', '#someContainer').live('click',function() {
    // run handler
});

$('.someClass', '#someContainer').live('click',function() {
    // run handler
});

And you have the same behavior as .delegate().

并且您的行为与.delegate().

回答by Guffa

Two situations come to mind:

想到了两种情况：

1. You would be using delegateon the bodyelement, so then you can just use liveinstead as it's simpler.

2. You need to use an older version of the jQuery library, where the delegateevent is not yet implemented.

1. 您将delegate在body元素上使用，因此您可以使用live它，因为它更简单。

2. 您需要使用旧版本的 jQuery 库，其中delegate尚未实现该事件。

回答by Misagh Aghakhani

Consider this example

考虑这个例子

<ul id="items">  
   <li> Click Me </li>  
</ul>

$('#items').delegate('li', 'click', function() {  
    $(this).parent().append('<li>New Element</li>');  
});

By passing a DOM element as the context of our selector, we can make Live() behave (almost) the same way that delegate() does. It attaches the handler to the context, not the document - which is the default context. The code below is equivalent to the delegate() version shown above.

通过传递一个 DOM 元素作为我们选择器的上下文，我们可以使 Live() 的行为（几乎）与 delegate() 的行为方式相同。它将处理程序附加到上下文，而不是文档 - 这是默认上下文。下面的代码等效于上面显示的 delegate() 版本。

$("li", $("#items")[0]).live("click", function() {  
    $(this).parent().append("<li>New Element</li>");  
}); 

Resource

资源

But, you'd better use delegate for better performance see here

但是，您最好使用委托以获得更好的性能，请参见此处