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

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

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

Está bastante claro en los documentos por qué no querrías usar Live. También como lo menciona Felix, .ones una forma más ágil de adjuntar eventos.

Ya no se recomienda el uso del método .live () 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 .live()método, lo que puede llevar mucho tiempo en documentos grandes.
• No se admiten los métodos de encadenamiento. Por ejemplo, no$("a").find(".offsite, .external").live( ... ); es válido y no funciona como se esperaba.
• Dado que todos los .live()eventos están adjuntos al documentelemento, los eventos toman la ruta más larga y lenta posible antes de ser manejados.
• Llamar event.stopPropagation() al controlador de eventos no es efectivo para detener los controladores de eventos adjuntos en la parte inferior del documento; el evento ya se ha propagado a document.
• El .live()método interactúa con otros métodos de eventos de formas que pueden resultar sorprendentes, por ejemplo, $(document).unbind("click")elimina todos los controladores de clic adjuntos a cualquier llamada a .live()!

Una diferencia con la que se tropieza la gente al pasar de .live()a .on()es que los parámetros para .on()son ligeramente diferentes cuando se vinculan eventos a elementos agregados dinámicamente al DOM.

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

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

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

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

Tenga en cuenta que llamamos .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 invocando .on()el documento, sin embargo, obtendrá un mejor rendimiento si usa un elemento más cercano a su selector. Cualquier elemento ancestro funcionará siempre que exista en la página antes de llamar .on().

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

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 breves de escribir! [...]

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

Buen tutorial sobre la diferencia entre on vs live

Cita del enlace anterior

¿Qué pasa con .live ()

Ya no se recomienda el uso del método .live () 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. No se admiten los métodos de encadenamiento. Por ejemplo, $ ("a"). Find (". Offsite, .external"). Live (…); no es válido y no funciona como se esperaba.
3. Dado que todos los eventos .live () están adjuntos en el elemento del documento, los eventos toman la ruta más larga y lenta posible antes de ser manejados.
4. Llamar a event.stopPropagation () en el controlador de eventos no es efectivo para detener los controladores de eventos adjuntos en la parte inferior del documento; el evento ya se ha propagado al documento.
5. El método .live () interactúa con otros métodos de eventos de formas que pueden resultar sorprendentes, por ejemplo, $ (documento) .unbind ("clic") elimina todos los controladores de clic adjuntos a cualquier llamada a .live ().

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

El método .live () se usa cuando se trata de la generación dinámica de contenido ... como lo he creado en un 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 cierre a cada pestaña que generará ... el código que he probado 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 muy bien ...

Soy el autor de una extensión de Chrome "Comment Save" que usa jQuery, y otra que usa .live(). La forma en que funciona la extensión es adjuntando un oyente a todas las áreas de texto que usan. live()- esto funcionó bien ya que cada vez que cambiaba el documento, aún adjuntaba al oyente a todas las nuevas áreas de texto.

Me mudé a .on()pero no funciona tan bien. No adjunta el oyente cada vez que cambia el documento, por lo que he vuelto a usar .live(). Supongo que es un error .on(). Solo ten cuidado con eso, supongo.

Tengo un requisito para identificar el evento cerrado del navegador. Después de hacer una investigación, estoy haciendo lo siguiente usando jQuery 1.8.3

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

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

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

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

1. Active una bandera usando el siguiente jQuery cuando ocurra el envío de un formulario

$ ('formulario'). live ('enviar', función () {cleanSession = false;});

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

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