cómo adjuntar manejadores de eventos jquery para html recién inyectado?

Question

¿Cómo usaría .on() si el HTML no se ha generado todavía? La página de jQuery dice

Si se está inyectando HTML nuevo en la página, seleccione los elementos y adjunte controladores de eventos después de que el nuevo HTML se coloque en la página.

Pero no estoy muy seguro de cómo hacerlo. ¿Hay alguna manera de "recargar" el controlador de eventos?

Así que si tuviera

$(document).ready(function(){ 
    $('.test').on('click', function(){ 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 
generatePage(); 
}); 

donde generatePage() crea un montón de divs con .test, ¿cómo iba a volver a enlazar .on()?

Soy consciente de que me han hecho preguntas similares, pero no encontré lo que estaba buscando después de una búsqueda rápida.

Answer 1

Use .on como en el ejemplo a continuación. Se puede suponer que la etiqueta de cuerpo siempre está disponible, por lo que es seguro asociar el controlador de eventos al cuerpo y delegar los eventos al selector, en este caso .test.

$(document).ready(function(){ 
    $('body').on('click', '.test', function(){ // Make your changes here 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 

    generatePage(); 
}); 

O si generatePage() también está generando las etiquetas html, la cabeza y el cuerpo utilizan documento como su selector.

$(document).ready(function(){ 
    $(document).on('click', '.test', function(){ // Make your changes here 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 

    generatePage(); 
}); 

Según la jquery documentation .on acepta los siguientes parámetros:

.on(events [, selector] [, data], handler(eventObject)) 

Incluidos selector se describe como sigue:

Cuando se proporciona un selector, el controlador de eventos se referido como delegado. No se llama al controlador cuando el evento ocurre directamente en el elemento vinculado, pero solo para descendientes (elementos internos) que coinciden con el selector. jQuery hace burbujear el evento desde el objetivo del evento hasta hasta el elemento donde está conectado el controlador (es decir, el más interno al elemento más externo ) y ejecuta el controlador para cualquier elemento a lo largo de esa ruta que coincida con el selector.