2010-11-17 15 views
50

Estoy usando jQuery en mi aplicación web. Mientras leo su documentación, leo live() y delegate(). Aunque han explicado ambos métodos, no entiendo la diferencia exacta entre ellos. Además, no estoy seguro sobre qué método es ideal en qué escenario.jQuery: live() vs delegate()

Ayúdeme a comprender claramente estos métodos.

Gracias

+1

Además de la respuesta a continuación, los lectores pueden querer echar un vistazo a esto * increíblemente bueno * [artículo] (http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/) que explica la diferencia entre 'bind',' live' y 'delegate'. – Jon

+0

Un resumen conciso: [JQuery - live vs delegate] (http://www.timacheson.com/Blog/2011/oct/jquery_live_vs_delegate). – Tim

Respuesta

56

.live() requiere ejecutar el selector de inmediato, a menos que esté usando el resultado es un gran desperdicio. El manejador de eventos aquí se adjunta al document, por lo que se debe verificar todo evento de ese tipo desde cualquier elemento que burbujee. Aquí hay un ejemplo de uso:

$(".myClass").live("click", function() { alert("Hi"); }); 

Tenga en cuenta que la declaración $(".myClass") corrió ese selector para encontrar todos los elementos con que clase a pesar de que no se preocupan por ellos, todo lo que querían fue la cadena ".myClass" para que coincida más tarde cuando click eventos burbujean hasta document.


.delegate() utiliza realmente .live() internamente, pero con un contexto. El selector es no ejecutándose inmediatamente, por lo que ya es más eficiente, y no se conecta a document (aunque puede) es mucho más local ... y todos esos otros eventos de otros árboles de elementos que no los cuidados nunca se controlan cuando se burbujean ... nuevamente más eficientes. Aquí hay un ejemplo de uso:

$("#myTable").delegate("td", "click", function() { alert("Hi"); }); 

¿Qué pasó aquí? Corrimos $("#myTable") para obtener el elemento para unir a (la verdad es más caro que document, pero estamos usando el resultado. A continuación se adjunta un controlador de eventos para que la (o las de otros casos) elementos. Sólo clicks de dentro ese elemento se comprueba con el selector "td" cuando ocurren, no desde todas partes como .live() qué (ya que todo lo está dentro document).

+0

Gran explicación, vivir siempre olía gracioso a mí. Es mucho mejor restringir sus manejadores solo a la parte que le importa. –

+0

Vea algunos puntos de referencia de rendimiento http://stackoverflow.com/questions/2690370/live-vs-bind/7692651#7692651 –

6

delegado() mapas a vivo() en el código jQuery. La principal diferencia es que se llama a live() en un elemento para el que desea delegar los eventos en un elemento diferente. live() delegará estos eventos en el documento objeto.

delegado(), por el contrario le permite configurar qué eventos elementos se delegan a pasar por un selector. Los eventos que burbujean hasta ese elemento se manejan si el elemento de origen coincide con el selector.

Como @NickCraver mentioned, delegado() se comporta mejor que vivir, ya que no necesariamente capturar eventos de cada elemento de la página, y no se consulta el selector de inmediato.

3

De jQuery Documentación:

Como de jQuery 1.7, es obsoleto el método .live(). Use .on() para adjuntar manejadores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate() en preferencia a .live().

http://api.jquery.com/live/

0

Método directo:

$("#mymethod").live("click", function() { alert("It checks the entire DOM"); }); 

cheques en directo Método #mymethod en DOM completo (a veces se necesitará tiempo basado en el contenido de su DOM)

Delegado Método:

$('.mycontainer').delegate('#mymethod','click',function() { alert('Checks only in mycontainer portion') }); 

Delagate no busca en todo su DOM solo busca en su porción de mycontainer. (Mejore el rendimiento)