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

Question

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

El problema que estoy teniendo es que cuando se carga dinámicamente HTML en un elemento usando:

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

Si trato y añadir un evento de clic después no se registra el evento utilizando cualquiera 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 para lograr este fu nctionality? Parece que solo funciona con .live() para mí, pero no debería usar ese método. Tenga en cuenta que #child es un elemento cargado dinámicamente.

Gracias.

Answer 1

Si desea que el manejador 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 asígnele un selector que coincida con su objeto dinámico como este : manejador

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

el evento se adjunta al objeto #parent y en cualquier momento un evento de clic burbujas hasta que que se originó en #child, se disparará el controlador de clic. Esto se denomina gestión delegada de eventos (el manejo de eventos se delega a un objeto principal).

Está hecho de esta manera porque se puede conectar el evento para el objeto #parent incluso cuando el objeto #child no existe todavía, pero cuando más tarde existe y se hace clic en, el evento click formarán burbujas al objeto #parent, se verá que se originó en #child y hay un controlador de eventos para un clic en #child y activa su evento.

Answer 2

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

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

Cuando click en cualquier elemento (s) acorde con #selector, el evento se propaga hasta el documento principal - siempre y cuando no hay otros oyentes que llaman event.stopPropagation() método - que rematar el borboteo de un evento para elementos primarios .

En lugar de enlazar 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 coincidirá automáticamente con los elementos existentes actualmente, así como con cualquier elemento agregado dinámicamente.

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

Answer 3

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

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

Answer 4

Prueba esto:

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

Desde el $.on() documentación:

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

Su elemento #child no existe cuando se llama a $.on() en él, por lo que el evento no está obligado (a diferencia de $.live()). #parent, sin embargo, existe, por lo que vincular el evento a eso está bien.

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

Answer 5

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

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

Básicamente, ver el documento para eventos de clic y filtrarlos para #child.

Answer 6

Utilicé 'live' en mi proyecto, pero uno de mis amigos me sugirió que debería usar 'on' en lugar de live. Y cuando traté de usar, experimenté un problema como el que tenías.

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

Las otras soluciones como usarlo como un niño simplemente llama a sus funciones cada vez en cada clic. Pero encuentro la manera de hacerlo realidad nuevamente y aquí está la solución.

escribir el código como:

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

de llamadas de llamadas(); después de crear su objeto en la página de esta manera.

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

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

Answer 7

Sé que es un poco tarde para obtener una respuesta, pero he creado un polyfill para el método .live(). Lo probé 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 proyectos grandes, donde no es posible convertir todas las llamadas .live() a las llamadas .on() equivalentes por el motivo que sea, el siguiente podría trabajo:

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

Solo tiene que incluirlo después de cargar jQuery y antes de llamar a live().