2011-11-07 20 views

Respuesta

98

Está bastante claro en el docs por qué no le gustaría usar en vivo. También como lo menciona Felix, .on es una manera más eficiente de adjuntar eventos.

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

  • jQuery intenta recuperar los elementos especificados por el selector antes de llamar al método .live(), que puede ser mucho tiempo en documentos de gran tamaño.
  • No se admiten los métodos de encadenamiento. Por ejemplo, $("a").find(".offsite, .external").live(...); es no válido y no funciona como se esperaba.
  • Dado que todos los eventos .live() se adjuntan en el elemento document, los eventos toman la ruta más larga y más lenta posible antes de que se manejen.
  • Llamando a event.stopPropagation() en el caso de que el controlador no sea efectivo para detener los controladores de eventos adjuntos más abajo en el documento; el evento ya se ha propagado al document.
  • El método .live() interactúa con otros métodos de evento de una manera que puede ser sorprendente, por ejemplo, $(document).unbind("click") elimina todos los manipuladores clic unido por cualquier llamada a .live()!
+8

Solo me pregunto, si este es el punto por qué no mejoraron el método en vivo en lugar de crear un nuevo método de encendido. A menos que haya algo en vivo, ¿qué puede hacer, pero no en? – neobie

+1

@neobie, es para que su código sea más significativo, y tiene uniformidad –

+0

@neobie: Imagino que es para mantener la compatibilidad con versiones anteriores. Las diferencias señaladas en esta respuesta muestran cómo su comportamiento es ligeramente diferente. Si 'live()' se modificó para tener el comportamiento de 'on()', podría romper el código existente. La gente de jQuery ha demostrado que no tienen necesariamente miedo de "romper" el código heredado, pero supongo que en este caso, decidieron que tenía sentido no arriesgarse a introducir regresiones. – rinogo

4

Ver las API official Blog

[..] El nuevo .on() y .OFF() unifican todos los sistemas de fijación de eventos a un documento en jQuery - y son más cortos que escribir ! [...]

1

Good tutorial on difference between on vs live

Cita desde el enlace anterior

¿Qué hay de malo en .live()

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

  1. jQuery intenta recuperar los elementos especificados por el selector antes de llamar al.El método live(), que puede consumir 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 does no funciona como se esperaba.
  3. Dado que todos los eventos .live() se adjuntan en el elemento de 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 evento controlador 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 en formas que pueden ser sorprendentes, por ejemplo, $ (document) .unbind (“clic”) elimina todos los controladores, haga clic unido por cualquier llamada a .live() !
0

yo soy el autor de una extensión de Chrome "Comment Save" que utiliza jQuery, y uno que utiliza .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 el oyente a todas las nuevas áreas de texto.

Pasé 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(). Eso es un error, supongo, en .on(). Solo ten cuidado, supongo.

+10

Debe utilizarlo incorrectamente; tiene una sintaxis ligeramente diferente al método '.live()'. El equivalente '.on()' para '$ ('p'). Live ('click', function() {alert ('clicked');});' es '$ (document) .on ('click' , 'p', function() {alert ('clicked');}); '. Tenga en cuenta que utiliza el método '.on()' en el 'documento' y luego especifica el elemento que desea adjuntar al controlador de eventos para escuchar en su segundo parámetro. – ajbeaven

+1

Puede leer más sobre esto aquí: http://api.jquery.com/on/. Consulte el encabezado ** Eventos directos y delegados ** – ajbeaven

+0

Tiene razón, en realidad me di cuenta de que no estaba escribiendo correctamente justo después de escribir la respuesta. Solo funciona parcialmente si lo usa de la misma manera que live(). Si lo escribe de la manera correcta en() funciona, pero todavía no tan bien como en vivo() en mi experiencia. Voy a probarlo más ya que el rendimiento de on parece mucho mejor. – PixelPerfect3

11

Una diferencia que la gente encuentra 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.

He aquí un ejemplo de la sintaxis que usamos para usar con el método .live():

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

function doSomething() { 
    // do something 
} 

Ahora con .live() ser obsoleta en la versión 1.7 de jQuery y eliminado en la versión 1.9, debe utilizar el método .on(). He aquí un ejemplo equivalente utilizando el método .on():

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

function doSomething() { 
    // do something 
} 

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

En el ejemplo anterior, estoy llamando al .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 al .on().

Esto se explica here in the documentation pero es bastante fácil perderse.

-1

Tengo un requisito para identificar el evento cerrado del navegador. Después de Doing to de la investigación que estoy haciendo siguiendo con jQuery 1.8.3

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

    $ ('a') en vivo ('clic', function() {cleanSession = false;}).;

  2. Encienda una bandera usando siguiente jQuery cuando cualquier momento tipo botón de entrada de la presente se hace clic en

$ ("input [type = enviar]"). Vivir ('clic', la función() {alerta ('botón de entrada pulsado'); cleanSession = falso;});

  1. Encienda una bandera usando jQuery siguiente cuando cualquier forma el tiempo presente sucede

$ ('forma') en vivo ('enviar', function() {cleanSession = false;}).;

Ahora, algo importante ... mi solución solo funciona si uso .live en su lugar .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 utiliza .live sus eventos son despedidos de inmediato, pero si se cambia a .ON No son despedidos a tiempo

+1

Esto no es cierto, debe estar utilizando '.on' incorrectamente o algo más en su código está causando esto. Tal vez pegue su código para su método '.on'. – ajbeaven

+0

Sí. Esto no es verdad. .on() es una versión mejorada de .live(). Por lo tanto, pegue su código aquí. Para que tengamos algo de claridad –

0

para obtener más información echa un vistazo ..

método .live() y .on()

.live() es se usa cuando se trata de la generación dinámica de contenidos ... como los 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 cierre a cada 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 preety mucho frío ...

+0

Bienvenido a SO. Por favor, trate de explicar sus respuestas y no solo proporcione enlaces, las respuestas de solo enlaces se consideran malas prácticas aquí. – mata

+0

Gracias ... Lo tendré en cuenta para la respuesta futura ... :) – Hiren

2
.live() 

Este método se utiliza para conectar 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 fijar 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."); 
}); 
Cuestiones relacionadas