javascript - funcion - jquery on live events

jQuery: live() vs delegate()

Question

Estoy usando jQuery en mi aplicación web. Mientras leo su documentación, leo sobre 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.

Por favor, ayúdame a entender claramente estos métodos.

Gracias

Answer 1

De la documentación de jQuery:

A partir de jQuery 1.7, el método .live () está en desuso. Use .on () para adjuntar manejadores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate () en preferencia a .live ().

.live()

Answer 2

Método en vivo:

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

Live Method Checks #mymethod en DOM completo (a veces llevará tiempo según el contenido de tu DOM)

Método de delegado:

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

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

Answer 3

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

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

Tenga en cuenta que el enunciado $(".myClass") ejecutó ese selector para encontrar todos los elementos con esa clase , aunque no nos ".myClass" , todo lo que queríamos era la cadena ".myClass" para que coincida más adelante cuando los eventos de click aparecen hasta document .

.delegate() realmente usa .live() internamente, pero con un contexto. El selector no se ejecuta inmediatamente, por lo que ya es más eficiente, y no se adjunta al document (aunque puede) es mucho más local ... y todos esos otros eventos de otros árboles de elementos que no te importan nunca son incluso comprobado cuando burbujeaba ... de nuevo más eficiente. Aquí hay un ejemplo de uso:

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

Ahora que paso aqui? $("#myTable") para obtener el elemento para adjuntarlo (es cierto que es más caro que el document , pero estamos utilizando el resultado. A continuación, adjuntamos un controlador de eventos a ese (o aquellos en otros casos) elementos. Solo clicks desde dentro de ese elemento se compara con el selector "td" cuando suceden, no desde cualquier lugar como lo hace .live() (ya que todo está dentro del document ).

Answer 4

delegate () asigna a live () en el código jQuery. La principal diferencia es que se invoca a live () en un elemento para el que desea delegar los eventos en un elemento diferente. live () delegará estos eventos en el objeto del documento .

delegate () , por otro lado, le permite establecer a qué elemento se delegan los eventos pasando un selector. Los eventos que burbujean hasta ese elemento se manejan si el elemento de origen coincide con el selector.

Como se mentioned @NickCraver, delegate () funciona mejor que en vivo porque no necesariamente captura eventos de cada elemento en la página, y no consulta el selector de inmediato.