jquery - El controlador de eventos no funciona en contenido dinámico

dynamic-content static-content

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Enlace de eventos en elementos creados dinámicamente? 23 respuestas

Tengo una etiqueta A en la que cuando se hace clic, se agrega otra etiqueta B para realizar una acción B al hacer clic. Así que cuando hago clic en la etiqueta B, se realiza la acción B. Sin embargo, el método .on no parece estar funcionando en la etiqueta B creada dinámicamente.

Mi html y jQuery para la etiqueta A es el siguiente:

<a id="address" class="add_address btn btn-inverse btn-medium pull-right push-top">Add Shipping address</a>

$(''.add_address'').click(function(){
    //Add another <a>
    $(document).append(''<a id="address"  class="pull-right update btn btn-inverse btn-medium push-top">Update</a>'');
})

Cuando se hace clic en la etiqueta B, se realiza alguna acción B. Mi jQuery es el siguiente:

$(''.update'').on(''click'',function(){
  //action B
});

Tengo algo de contenido no dinámico que tiene clase ".update" también. En el método .on() anterior funciona bien para el contenido no dinámico, pero no para el contenido dinámico.

¿Cómo puedo hacer que funcione para contenido dinámico?

Answer 1

Debe agregar el parámetro selector, de lo contrario, el evento está directamente vinculado en lugar de delegado, que solo funciona si el elemento ya existe (por lo que no funciona para contenido cargado dinámicamente).

Consulte http://api.jquery.com/on/#direct-and-delegated-events

Cambia tu código a

$(document.body).on(''click'', ''.update'' ,function(){

El conjunto jQuery recibe el evento y luego lo delega a elementos que coinciden con el selector dado como argumento. Esto significa que, contrariamente a cuando se usa en live , los elementos del conjunto jQuery deben existir al ejecutar el código.

Como estas respuestas reciben mucha atención, aquí hay dos consejos adicionales:

1) Cuando sea posible, intente vincular el detector de eventos al elemento más preciso, para evitar el manejo inútil de eventos.

Es decir, si está agregando un elemento de clase b a un elemento existente de id a , entonces no use

$(document.body).on(''click'', ''#a .b'', function(){

pero usa

$(''#a'').on(''click'', ''.b'', function(){

2) Tenga cuidado, cuando agregue un elemento con un ID, para asegurarse de que no lo agregue dos veces. No solo es "ilegal" en HTML tener dos elementos con el mismo ID, sino que también rompe muchas cosas. Por ejemplo, un selector "#c" recuperaría solo un elemento con este id.

Answer 2

Te falta el selector en la función .on :

.on(eventType, selector, function)

Este selector es muy importante!

http://api.jquery.com/on/

Si se está inyectando nuevo HTML en la página, seleccione los elementos y adjunte los controladores de eventos después de colocar el nuevo HTML en la página. O bien, use eventos delegados para adjuntar un controlador de eventos

Ver jQuery 1.9 .live () no es una función para más detalles.