jQuery no reconoce las clases agregadas dinámicamente a la página

Question

Estoy trabajando en un proyecto, donde me gustaría agregar muchos elementos de la misma clase a una página, y hacer que todas estas clases sean accesibles a $ ('selector') .hacer clic(); controlador de eventos. Sin embargo, lo que está sucediendo es que ninguno de los elementos dinámicamente agregados de la misma clase responde a los clics.

para darle una mejor idea de lo que quiero decir, he hecho un jsFiddle muestra, que es muy similar al problema real en mi proyecto:

Enlace a jsFiddle: http://jsfiddle.net/8LATf/3/

• Un elemento de la clase "added_element" ya está en la página cuando se carga. Este elemento se puede hacer clic.

• Se hace clic en un botón y se agregan otros elementos de la clase "elemento agregado" a la página dinámicamente usando append. Ninguno de estos elementos se puede hacer clic.

¿Cómo puedo hacer que todos los elementos de la clase "additional_element" se puedan hacer clic? Supongo que tiene que ver con el selector que uso en el controlador de eventos, pero no he podido descifrarlo.

¡Cualquier ayuda es muy apreciada!

Answer 1

You need to delegate your handler. La forma más sencilla es delegar todo a la document usando .on('click', ...) (así es como .live() se convierte internamente, a partir de jQuery 1.7):

$(document).on('click','.added_element',function() { 
    var id = $(this).attr('id'); 
    alert(id);  
}); 

​http://jsfiddle.net/mblase75/8LATf/4/

Sin embargo, en su caso, puede delegar en el #container, ya que todos los elementos agregados aparecen dentro de eso. Delegar al elemento DOM más cercano posible es preferible por razones de eficiencia, cuando es posible.

$('#container').on('click','.added_element',function() { 
    var id = $(this).attr('id'); 
    alert(id);  
}); 

​http://jsfiddle.net/mblase75/8LATf/5/

Answer 2

Cuando se conecta el controlador de eventos "a" added_element las creadas de forma dinámica a través de la escritura no está en el DOM. Por lo tanto, no hay un controlador de eventos vinculado al elemento creado recientemente.

Para solucionar esto, conecte el controlador de eventos al div que contiene y haga que busque "additional_element".

jfiddle: http://jsfiddle.net/yKJny/

Answer 3

Es necesario utilizar la delegación eventos aquí, la forma correcta de unir evento será:

$('#container').on('click', '.added_element', function() { 
    var id = $(this).attr('id'); 
    alert(id); 
}); 

Aquí es una corrected fiddle.