2012-08-22 36 views
68

añaden dinámicamente Así que ahora mismo, entiendo que con el fin de conectar un detector de eventos a un elemento añadido de forma dinámica, hay que redefinir el oyente después de añadir el elemento. ¿Hay alguna forma de eludir esto, por lo que no tiene que ejecutar un bloque adicional de código?Jquery detectores de eventos añadiendo a los elementos

+0

Una solución de vainilla JS: http://stackoverflow.com/a/27373951/1385441 –

Respuesta

127

Usando .on() puede definir su función una vez, y se ejecutará para todos los elementos añadidos de forma dinámica.

por ejemplo

$('#staticDiv').on('click', 'yourSelector', function() { 
    //do something 
}); 
+0

¿Hay una manera de utilizar .on() en eventos que no están en jquery nativo. es decir, necesito usarlo con un plugin de Jquery. – Wiz

+0

@Wiz: ('clase '). Puede enlazar a cualquier evento – zerkms

+0

@zerkms Bueno, yo estoy tratando de usarlo con tarjeta flotante, y en $ (' tarjeta flotante', function() {}); no funciona, cuando la sintaxis habitual es $ ('. clase'). hovercard (función() {}); – Wiz

38
$(document).on('click', 'selector', handler); 

Dónde click es un nombre de evento y handler es un controlador de eventos, como referencia a una función o una función anónima function() {}

PD: si se conoce el nodo en particular va a añadir elementos dinámicos a - puede especificarlo en lugar de document.

+6

No utilice '$ (document)'. El evento debe estar vinculado al padre estático más cercano. –

+3

@Joseph Silber: He añadido PS para eso. Y "no usar" es demasiado categórico. Hay casos válidos para usarlo (no se menciona siquiera se especifica en la documentación de jQuery: http://api.jquery.com/live/) – zerkms

1

Al agregar nuevo elemento con jQuery plugin de llamadas, puede hacerlo como lo siguiente:

$('<div>...</div>').hoverCard(function(){...}).appendTo(...) 
2

Estás generando dinámicamente esos elementos por lo que cualquier oyente aplica al cargar la página costumbre estar disponible. He editado tu violín con la solución correcta. Básicamente jQuery mantiene el evento para un enlace posterior adjuntándolo al Elemento padre y propagándolo hacia abajo al elemento creado dinámicamente correcto.

$('#musics').on('change', '#want',function(e) { 
    $(this).closest('.from-group').val(($('#want').is(':checked')) ? "yes" : "no"); 
    var ans=$(this).val(); 
    console.log(($('#want').is(':checked'))); 
}); 

http://jsfiddle.net/swoogie/1rkhn7ek/39/

Cuestiones relacionadas