añadir dinámicamente controladores de eventos de jQuery a HTML dinámico

tengo una sección div que estoy Llenar dinámicamente a través de jQuery Ajax:añadir dinámicamente controladores de eventos de jQuery a HTML dinámico

$('#treeview').append(data.d);

Cuando los datos es un montón de divs anidados con diferentes ID.

también tengo algo de código jQuery que hace que los divs en una vista de árbol, con un +/- expandir/contraer y la población de datos dinámico:

$('div.tree div:has(div)').addClass('parent'); // Requires jQuery 1.2! 
    $('div.tree div').click(function() { 
     var o = $(this); 
     o.children('div').toggle(); 
     o.filter('.parent').toggleClass('expanded'); 
     BindGridView($(this).attr('id')); 
     return false; 
    });

El problema es cuando me pega los divs en la vista de árbol principal div todo está bien. Cuando creo dinámicamente el mismo texto exacto, sí lo he comparado, la población de datos dinámicos de expandir/contraer & no funciona; sin embargo, puedo ver mi distribución div correcta en mi página.

supongo que tengo que añadir el evento click & addClass cuando estoy haciendo las

$ ('# TreeView') append (data.d).;

Pero no puedo entender cómo.

Fuente

2011-01-24 mike

Si agrega dinámicamente elementos al DOM, los controladores de eventos existentes vinculados a un selector no funcionarán (como click).

Debe usar la función live para poder capturar los eventos de los elementos DOM recientemente creados.

Cabe señalar (as it was in the comments by Zach L) que a partir de jQuery 1.7live ha sido desaprobado en favor de on. El consejo general es el mismo (seguimiento de elementos dinámicos), solo el mecanismo (on vs live) ha cambiado.

Fuente

2011-01-24 19:13:11 casperOne

algo así como $ (# TreeView) .live ("clic", function() {var o = $ (this); o.children ('div') alternar();. o.filter (' .parent '). toggleClass (' expanded '); BindGridView ($ (this) .attr (' id ')); return false; }); – mike

y el addClass? – mike

@mike: ¿Qué pasa con el 'addClass'? No tiene ningún impacto, los selectores dentro de la función funcionarán bien (buscando la clase padre, supongo). La llamada 'live' debería funcionar, pero es un poco difícil de decir a partir de los comentarios. =) – casperOne

Puede usar delegate() o live() para vincular manejadores de eventos a elementos dinámicos. En la mayoría de los casos, delegate() será la ruta más eficiente, a menos que no pueda predecir dónde estarán los elementos dinámicos en el DOM.

Fuente

2011-01-24 19:46:43

live() está obsoleto.

Desde el docs:

Uso .on() a asociar controladores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate() con preferencia a .live().

Fuente

2012-03-09 21:06:02

La creación de objetos en los que se puede hacer clic dinámicamente también me provocó un ataque de zumbido. No pude hacer funcionar la función delegate(). Finalmente encontré este ejemplo http://www.rahulsingla.com/blog/2011/03/jqueryui-adding-removing-buttons-dynamically-from-a-jqueryui-dialog

y lo modificó para

var buttonClear = $('#formResult').parent().find('#formMessage'); buttonClear.append("<input type='button' value='Clear message' id='clear'>");

$("#clear").click(function() { // hacer clic aquí botón de acción });

El formResult es una forma de identificación que ya están en la página y formMessage es un mensaje agregado dinámicamente que se muestra después del formulario está enviado. La secuencia de comandos agrega un botón al final del formulario para borrar el mensaje.

Fuente

2012-03-28 20:52:18

añadir dinámicamente controladores de eventos de jQuery a HTML dinámico

Respuesta

Cuestiones relacionadas