jQuery oyente no "escuchar" a los acontecimientos sobre los elementos DOM creado dinámicamente

Question

que tienen un oyente como esto:

$('.delete').click(function() { 
    ...some stuff 
}); 

También, en la misma página, otro script añadir dinámicamente elementos al DOM de esta manera :

$('#list').append('<tr><td><a class="delete" href="#">delete</a></td></tr>'); 

Mi problema es que el oyente no "escucha" estos elementos creados dinámicamente.

¿Alguien puede arrojar algo de luz, por favor?

Answer 1

Escuchará solo los elementos que existieron cuando vinculó el controlador de eventos. Si desea que escuche elementos creados dinámicamente, desea usar la función live(), que funciona con elementos actuales y futuros.

EDIT: a partir de jQuery 1.7, el método recomendado es utilizar la función .on(), que sustituye .bind(), .live() y .delegate(), proporcionando toda la funcionalidad necesaria para la fijación de los controladores de eventos.

Answer 2

Sure.

El oyente dinámico no es dinámico.

$('.delete').click(function() { 

conecta un oyente a todos los elementos existentes.

Cuando agrega otro elemento, debe volver a ejecutarlo para asegurarse de que los nuevos elementos tengan el mismo manejador conectado.

Básicamente, los nuevos elementos no consiguen escucharon porque usted no adjuntar nuevos controladores para ellos;)

Answer 3

Sí, echa un vistazo a la función en vivo jQuery. Recuerde también vincular y desvincular eventos. tenía problemas en los que el enlace se seguía vinculando cada vez que se creaba, pero como la página no se recargaba, el enlace tenía 5 o 6 eventos de clic vinculados a él y causaba problemas. solo tuve que desvincular eventos al enlace.

Answer 4

Enlazar eventos a un elemento que aún no existe es imposible. La forma en que puede lograr esto, como lo expresó Yogurt, es "on" y especificando el selector que desea utilizar como el segundo parámetro de la función.

this.$someStaticParent.on('click', 'li', functionName); 

Lo que hace esto, le dice al elemento padre que se lleve a cabo un evento para hacer clic. Cada vez que se hace clic, se verificará DONDE vino el evento, si coincide con el parámetro dos, se activa un evento. Esto se llama delegación de eventos. Está permitiendo que el padre acepte eventos y luego active los eventos luego de una comparación exitosa. Este es un patrón de diseño común.