javascript - alternative - Método jQuery.live() vs.on() para agregar un evento de clic después de cargar html dinámico
live jquery alternative (7)
.on () es para jQuery versión 1.7 y superior. Si tienes una versión anterior, usa esto:
$("#SomeId").live("click",function(){
//do stuff;
});
Estoy usando jQuery v.1.7.1 donde el método .live () está aparentemente 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 después, 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? 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.
El equivalente de .live () en 1.7 se ve así:
$(document).on(''click'', ''#child'', function() ...);
Básicamente, mire el documento para eventos de clic y filtre para #child.
Prueba esto:
$(''#parent'').on(''click'', ''#child'', function() {
// Code
});
De la documentación de $.on() :
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 a
.on().
Su elemento #child no existe cuando llama a $.on() , así que el evento no está vinculado (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'' que solo se #parent si el evento se #parent a #parent desde #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 proyectos grandes, donde no es posible convertir todas las llamadas .live () a las llamadas equivalentes .on () por el motivo que sea, lo siguiente podría trabajo:
if(jQuery && !jQuery.fn.live) {
jQuery.fn.live = function(evt, func) {
$(''body'').on(evt, this.selector, func);
}
}
Solo inclúyalo después de cargar jQuery y antes de llamar a live ().
Si desea que el controlador de clic funcione para un elemento que se carga dinámicamente, entonces configura el controlador de eventos en un objeto principal (que no se carga dinámicamente) y le da un selector que coincida con su objeto dinámico como este:
$(''#parent'').on("click", "#child", function() {});
El controlador de eventos se adjuntará al objeto #parent y, en cualquier momento en que se #parent un evento de clic que se originó en #child , activará su controlador de clics. Esto se denomina manejo de eventos delegado (el manejo de eventos se delega a un objeto principal).
Se hace de esta manera porque puede adjuntar el evento al objeto #parent incluso cuando el objeto #child todavía no existe, pero cuando existe más tarde y se hace clic en él, el evento click se #parent objeto #parent , ver que se originó en #child y hay un controlador de eventos para hacer clic en #child y disparar su evento.
Utilicé ''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 tuviste.
En mis páginas creo botones filas de tablas y muchas cosas de dom dinámicamente. Pero cuando lo uso en la magia desapareció.
Las otras soluciones, como usarlo como un niño, solo llaman a sus funciones cada vez que hacen 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...});
}
Llamante (); después de crear su objeto en la página como esta.
$(''<dom class="ObjectYouWntToCall">bla... bla...<dom>'').appendTo("#whereeveryouwant");
caller();
De esta manera, se llama a su función cuando se supone que no debe hacer clic en la página.
$(document).on(''click'', ''#selector'', function() { /* do stuff */ });
EDIT: 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 hace click en cualquier elemento (s) que coincida con #selector , el evento #selector hasta el documento principal, siempre y cuando no haya otros oyentes que llamen event.stopPropagation() método event.stopPropagation() , lo que mejoraría la propagación de un evento al principal elementos.
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 escucha, una vez, que coincidirá automáticamente con los elementos existentes, así como con cualquier elemento agregado dinámicamente.
Esto es inteligente por varias razones, incluyendo el rendimiento y la utilización de la memoria (en aplicaciones a gran escala)