Método jQuery .live () vs .on () para agregar un evento click después de cargar html dinámico

Estoy usando jQuery v.1.7.1 donde el método .live () aparentemente está en desuso.

El problema que tengo es que al cargar dinámicamente html en un elemento usando:

$('#parent').load("http://..."); 

Si intento agregar un evento de clic luego, no registra el evento usando ninguno de estos métodos:

$('#parent').click(function() ...); 

o

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

¿Cuál es la forma correcta de lograr esta funcionalidad? Solo parece funcionar con .live () para mí, pero no debería estar usando ese método. Tenga en cuenta que #child es un elemento cargado dinámicamente.

Gracias.

Si desea que el controlador de clics funcione para un elemento que se carga dinámicamente, configure el controlador de eventos en un objeto primario (que no se carga dinámicamente) y le da un selector que coincida con su objeto dinámico de esta manera:

$('#parent').on("click", "#child", function() {});

El controlador de eventos se adjuntará al #parentobjeto y cada vez que se genere un evento de clic que se originó en #childél, activará su controlador de clic. Esto se denomina manejo de eventos delegados (el manejo de eventos se delega a un objeto primario).

Se hace de esta manera porque puede adjuntar el evento al #parentobjeto incluso cuando el #childobjeto aún no existe, pero cuando luego exista y se haga clic en él, el evento de clic burbujeará hasta el #parentobjeto, verá que se originó #childy Hay un controlador de eventos para hacer clic #childy activar su evento.

Prueba esto:

$('#parent').on('click', '#child', function() {
    // Code
});

De la $.on()documentación:

Los controladores de eventos están vinculados solo a los elementos seleccionados actualmente; deben existir en la página en el momento en que su código realiza la llamada .on().

Su #childelemento no existe cuando lo llama $.on(), por lo que el evento no está vinculado (a diferencia $.live()). #parentSin embargo, sí existen, por lo que la unión del evento a que está muy bien.

El segundo argumento en mi código anterior actúa como un 'filtro' para disparar solo si el evento burbujeó #parentdesde #child.

$(document).on('click', '.selector', function() { /* do stuff */ });

EDITAR: Estoy proporcionando un poco más de información sobre cómo funciona esto, porque ... palabras. Con este ejemplo, está colocando un oyente en todo el documento.

Cuando clickcoincide con cualquier elemento (s) .selector, el evento aparece en el documento principal, siempre que no haya otros oyentes que llamenevent.stopPropagation() método, lo que aumentaría el burbujeo de un evento a los elementos principales.

En lugar de vincularse a un elemento específico o conjunto de elementos, está escuchando cualquier evento que provenga de elementos que coincidan con el selector especificado. Esto significa que puede crear un oyente, una vez, que coincida automáticamente con los elementos existentes actualmente, así como con cualquier elemento agregado dinámicamente.

Esto es inteligente por varias razones, incluido el rendimiento y la utilización de la memoria (en aplicaciones a gran escala)

EDITAR:

Obviamente, el elemento padre más cercano en el que puede escuchar es mejor, y puede usar cualquier elemento en lugar de documentsiempre que los niños para los que desea monitorear eventos estén dentro de ese elemento padre ... pero eso realmente no tiene nada que ver con la pregunta

El equivalente de .live () en 1.7 se ve así:

$(document).on('click', '#child', function() ...); 

Básicamente, mire el documento para ver los eventos de clic y filtrelos para #child.

Sé que es un poco tarde para una respuesta, pero he creado un polyfill para el método .live (). Lo he probado en jQuery 1.11, y parece funcionar bastante bien. Sé que se supone que debemos implementar el método .on () siempre que sea posible, pero en grandes proyectos, donde no es posible convertir todas las llamadas .live () a las llamadas equivalentes .on () por cualquier razón, lo siguiente podría trabajo:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

Simplemente inclúyalo después de cargar jQuery y antes de llamar a live ().

.on () es para jQuery versión 1.7 y superior. Si tiene una versión anterior, use esto:

$("#SomeId").live("click",function(){
    //do stuff;
});

Usé 'live' en mi proyecto, pero uno de mis amigos sugirió que debería usar 'on' en lugar de live. Y cuando intenté usar eso, experimenté un problema como el que tú tenías.

En mis páginas creo filas de tablas de botones y muchas cosas de dom de forma dinámica. pero cuando uso en la magia desapareció.

Las otras soluciones como usarlo como un niño solo llaman a sus funciones cada vez que hace clic. Pero encuentro una manera de hacer que vuelva a suceder y aquí está la solución.

Escribe tu código como:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Llamar a la persona que llama (); después de crear su objeto en la página de esta manera.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

De esta forma, se llama a su función cuando se supone que no debe hacer cada clic en la página.