funcion - jquery on live events

¿Cuál es la diferencia entre jQuery.live() y.on()

Question

Veo que hay un nuevo método .on() en jQuery 1.7 que reemplaza el .live() en versiones anteriores.

Me interesa saber la diferencia entre ellos y cuáles son los beneficios de usar este nuevo método.

Answer 1

Está bastante claro en los docs por qué no te gustaría usar en vivo. También como lo menciona Felix, .on es una forma más racional de adjuntar eventos.

El uso del método .live () ya no se recomienda, ya que las versiones posteriores de jQuery ofrecen mejores métodos que no tienen sus inconvenientes. En particular, surgen los siguientes problemas con el uso de .live ():

• jQuery intenta recuperar los elementos especificados por el selector antes de llamar al método .live() , que puede llevar mucho tiempo en documentos grandes.
• Los métodos de encadenamiento no son compatibles. Por ejemplo, $("a").find(".offsite, .external").live( ... ); no es válido y no funciona como se esperaba
• Dado que todos los eventos .live() se adjuntan en el elemento del document , los eventos toman la ruta más larga y más lenta posible antes de que se manejen.
• Llamar a event.stopPropagation() en el controlador de eventos no es efectivo para detener los controladores de eventos adjuntos más abajo en el documento; el evento ya se propagó al document .
• El método .live() interactúa con otros métodos de eventos de maneras que pueden ser sorprendentes, por ejemplo, $(document).unbind("click") elimina todos los manejadores de clics conectados por cualquier llamada a .live() !

Answer 2

Soy el autor de una extensión de Chrome "Guardar comentario" que usa jQuery y otra que usa .live() . La forma en que funciona la extensión es mediante la conexión de un oyente a todas las áreas de texto. live() - esto funcionó bien ya que cada vez que el documento cambiaba todavía adjuntaba al oyente a todas las nuevas áreas de texto.

Me moví a .on() pero no funciona tan bien. No conecta al oyente cada vez que cambia el documento, por lo que he vuelto a utilizar .live() . Ese es un error, supongo, en .on() . Solo ten cuidado, supongo.

Answer 3

Tengo un requisito para identificar el evento cerrado del navegador. Después de Doing to of research estoy haciendo lo siguiente usando jQuery 1.8.3

1. Encienda una bandera usando la siguiente jQuery cuando se hace clic en hipervínculo

   $ (''a''). live (''click'', function () {cleanSession = false;});

2. Encienda una bandera usando la siguiente jQuery cuando se haga clic en el botón de entrada en cualquier momento del tipo de envío

$ ("input [type = submit]"). live (''click'', function () {alerta (''input button clicked''); cleanSession = false;});

1. Encienda una bandera usando la siguiente jQuery cuando el envío de formulario a cualquier hora ocurra

$ (''form''). live (''submit'', function () {cleanSession = false;});

Ahora, algo importante ... mi solución solo funciona si uso .live en lugar de .on. Si uso .on, entonces el evento se activa después de que se envía el formulario y que es demasiado tarde. Muchas veces mis formularios se envían usando javascript call (document.form.submit)

Entonces, hay una diferencia clave entre .live y .on. Si usa .live, sus eventos se activan inmediatamente, pero si cambia a .on no se activa a tiempo

Answer 4

Una diferencia con la que tropiezan las personas al pasar de .live() a .on() es que los parámetros para .on() son ligeramente diferentes cuando se vinculan eventos a elementos añadidos dinámicamente al DOM.

Aquí hay un ejemplo de la sintaxis que solíamos usar con el método .live() :

$(''button'').live(''click'', doSomething);
function doSomething() {
// do something
}

Ahora que .live() está en desuso en jQuery versión 1.7 y eliminado en la versión 1.9, debe usar el método .on() . Aquí hay un ejemplo equivalente usando el método .on() :

$(document).on(''click'', ''button'', doSomething);
function doSomething() {
// do something
}

Tenga en cuenta que estamos llamando .on() contra el documento en lugar del botón en sí . Especificamos el selector para el elemento cuyos eventos estamos escuchando en el segundo parámetro.

En el ejemplo anterior, estoy llamando a .on() en el documento, sin embargo, obtendrá un mejor rendimiento si usa un elemento más cercano a su selector. Cualquier elemento ancestro funcionará mientras exista en la página antes de llamar a .on() .

Esto se explica aquí en la documentación, pero es bastante fácil pasar por alto.

Answer 5

Ver el Blog oficial

[..] Las nuevas API .on () y .off () unifican todas las formas de adjuntar eventos a un documento en jQuery, ¡y son más cortas para escribir! [...]

Answer 6

para obtener más información échale un vistazo ... docs y .on()

El método .live () se usa cuando se trata de la generación dinámica de contenidos ... como el que he creado en el programa que agrega una pestaña cuando cambio el valor de un control deslizante de Jquery y quiero adjuntar la funcionalidad del botón de cerrar a todas las pestañas que generará ... el código que he intentado es ...

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

y funciona bastante bien ...

Answer 7

Buen tutorial sobre la diferencia entre on vs live

Cita del enlace de arriba

Qué está mal con .live ()

El uso del método .live () ya no se recomienda, ya que las versiones posteriores de jQuery ofrecen mejores métodos que no tienen sus inconvenientes. En particular, surgen los siguientes problemas con el uso de .live ():

1. jQuery intenta recuperar los elementos especificados por el selector antes de llamar al método .live (), que puede llevar mucho tiempo en documentos grandes.
2. Los métodos de encadenamiento no son compatibles. Por ejemplo, $ ("a"). Find (". Offsite, .external"). Live (...); no es válido y no funciona como se esperaba
3. Dado que todos los eventos .live () se adjuntan en el elemento del documento, los eventos toman la ruta más larga y más lenta posible antes de que se manejen.
4. Llamar a event.stopPropagation () en el controlador de eventos no es efectivo para detener los controladores de eventos adjuntos más abajo en el documento; el evento ya se propagó al documento.
5. El método .live () interactúa con otros métodos de eventos de maneras que pueden ser sorprendentes, por ejemplo, $ (document) .unbind ("click") elimina todos los manejadores de clics conectados por cualquier llamada a .live ()!

Answer 8

.live()

Este método se utiliza para adjuntar un controlador de eventos para todos los elementos que coinciden con el selector actual, ahora y en el futuro.

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

y

.on()

Este método se utiliza para adjuntar una función de controlador de eventos para uno o más eventos a los elementos seleccionados a continuación es el ejemplo.

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