Usando live() - beneficios - similar a bind()

Question

He estado leyendo un poco sobre el evento en vivo de jquery y todavía estoy un poco confundido? ¿Cuál es el beneficio de usarlo?

http://docs.jquery.com/Events/live

Sé que es similar a unirse, pero estos dos eventos todavía parecen fuera de mí.

Solo busco algunos consejos.

Answer 1

Advertencia: Esta respuesta es vieja. Todavía muy útil, pero live ha sido desaprobado y eliminado en las versiones más recientes de jQuery. Así que lea la respuesta, porque los casos de uso no han cambiado, y usted aprenderá por qué y cuándo usar menos controladores de eventos. Pero a menos que todavía esté utilizando una versión realmente antigua de jQuery (v1.4.2 o anterior), debería considerar escribir el nuevo código equivalente en su lugar.Como se documenta en el jQuery API for live y copiado aquí:

Reescribiendo el método .live() en términos de sus sucesores es sencillo; éstas son las plantillas para llamadas equivalentes para todos los métodos de fijación de tres eventos:

1. $(selector).live(events, data, handler); // jQuery 1.3+
2. $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
3. $(document).on(events, selector, data, handler); // jQuery 1.7+

A veces hay un conjunto de elementos cuando se carga la página, como, digamos, editar enlaces:

<table> 
    <tr> 
    <td>Item 1</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
    <td>Item 2</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
    <td>Item 3</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
</table> 

Ahora, tal vez usted tiene algo como esto con jQuery:

$(document).ready(function() { 
    $('a.edit').click(function() { 
    // do something 
    return false; 
    }); 
}); 

Pero lo que si se añade un nuevo elemento a esta tabla dinámica, después de que la página se ha cargado inicialmente?

$('table').append(' 
    <tr><td>Item 4</td><td><a href="#" class="edit">Edit</a></td></tr> 
'); 

Al hacer clic en "Editar" en este nuevo elemento, no ocurrirá nada porque los eventos estaban vinculados a la carga de la página. Entrar en vivo Con él, puede enlazar el evento por encima de la siguiente manera:

$(document).ready(function() { 
    $('a.edit').live('click', function() { 
    // do something 
    return false; 
    }); 
}); 

Ahora si agrega nuevos elementos <a> con una clase de edit después de que la página se ha cargado inicialmente, todavía registrará este controlador de eventos.

Pero, ¿cómo se logra esto?

jQuery usa lo que se conoce como delegación de eventos para lograr esta funcionalidad. La delegación de eventos es útil en esta situación o cuando desea cargar una gran cantidad de controladores. Digamos que tiene un DIV con imágenes:

<div id="container"> 
    <img src="happy.jpg"> 
    <img src="sad.jpg"> 
    <img src="laugh.jpg"> 
    <img src="boring.jpg"> 
</div> 

Pero en lugar de 4 imágenes, que tiene 100 o 200 o 1000. Usted desea enlazar un evento de clic a las imágenes de modo que se realiza la acción X cuando el usuario hace clic en eso. Haciendo lo que cabría esperar ...

$('#container img').click(function() { 
    // do something 
}); 

... ¡obligaría a cientos de manipuladores que hacen lo mismo! Esto es ineficiente y puede provocar un rendimiento lento en webapps pesados. Con la delegación de eventos, incluso si no planea agregar más imágenes más tarde, usar Live puede ser mucho mejor para este tipo de situación, ya que puede vincular un manejador al contenedor y comprobar cuándo se hace clic si el objetivo era una imagen, y luego realizar una acción:

// to achieve the effect without live... 
$('#container').click(function(e) { 
    if($(e.target).is('img')) { 
     performAction(e.target); 
    } 
}); 

// or, with live: 
$('img', '#container').live('click', function() { 
    performAction(this); 
}); 

Desde jQuery sabe que los nuevos elementos se pueden agregar más adelante o que el rendimiento es importante, en lugar de unirse a un evento para las imágenes reales, se podría añadir una a la div como en el primer ejemplo (en realidad, estoy bastante seguro de que los une al cuerpo, pero podría ser al contenedor en el ejemplo anterior) y luego delegar. Esta propiedad e.target puede permitirle verificar si el evento en el que se hizo clic/actuó coincide con el selector que podría haber especificado.

Para dejar en claro: esto es útil no solo en la forma directa de no tener que volver a vincular eventos, sino que puede ser mucho más rápido para una gran cantidad de elementos.

Answer 2

Básicamente, con .live() no tiene que molestarse en actualizar controladores de eventos si tiene un sitio web muy dinámico.

$('.hello').live('click', function() { 
    alert('Hello!'); 
}); 

Ese ejemplo se unirá el evento click a cualquier elemento que ya tienen el "hola" clase , así como cualquier elemento que se insertan de forma dinámica, ya sea por AJAX o pasado de moda JavaScript.

Answer 3

La ventaja es que el controlador de eventos también se agregará a los nuevos elementos coincidentes cuando se creen esos elementos. Esto le ahorra tener que agregar manualmente el controlador de eventos cada vez que crea un elemento nuevo (que coincida con un selector utilizado anteriormente) que lo necesita.

Agregado en jQuery 1.3: se une a un manejador a un evento (como clic) para todos actual - y el futuro - emparejado elemento.

De http://docs.jquery.com/Events/live#typefn, énfasis mío.