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
Respuesta
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
});
¿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
@Wiz: ('clase '). Puede enlazar a cualquier evento – zerkms
@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
$(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
.
No utilice '$ (document)'. El evento debe estar vinculado al padre estático más cercano. –
@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
Al agregar nuevo elemento con jQuery plugin de llamadas, puede hacerlo como lo siguiente:
$('<div>...</div>').hoverCard(function(){...}).appendTo(...)
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')));
});
- 1. Cambie los elementos de 2 html y preserve los detectores de eventos en ellos
- 2. ¿Debo eliminar los detectores de eventos antes de eliminar los elementos?
- 3. ¿Los detectores de eventos en jQuery se eliminan automáticamente cuando quita el elemento con .html()?
- 4. ¿Quitar todos los detectores de eventos JavaScript de un elemento y sus elementos secundarios?
- 5. Seleccionar nodeValue añadiendo los elementos secundarios
- 6. Cómo deshabilitar temporalmente los detectores de eventos en Swing?
- 7. Cómo agregar detectores de eventos a los objetos en un svg?
- 8. detectores de eventos - Equivalente para Firefox?
- 9. jQuery: elementos y eventos clon
- 10. Adición de detectores de eventos táctiles a MapView
- 11. ¿Es posible añadir a innerHTML sin destruir los detectores de eventos de los descendientes?
- 12. añadiendo clase CSS a múltiples elementos
- 13. agregar múltiples detectores de eventos a un elemento
- 14. Jquery: Añadiendo una clase de incluso una extraña Lista-Elementos
- 15. Obtener detectores de eventos asociados al nodo mediante addEventListener
- 16. Necesito separar eventos en jQuery cuando elimino los elementos
- 17. Añadiendo un script jQuery a wordpress Admin
- 18. Eventos de vinculación a elementos DOM aún no creados (jquery)
- 19. ¿Vincula un controlador de eventos a múltiples elementos jQuery?
- 20. Cómo eliminar todos los detectores de eventos a la vez en AS3
- 21. haga clic en los detectores de eventos adjuntos a document.body no disparar en iOS6?
- 22. ¿Por qué utilizar los detectores de eventos sobre las llamadas a funciones?
- 23. eventos jquery no funciona para elementos adjuntas
- 24. ¿Hay alguna manera de eliminar los detectores de eventos desconocidos de los objetos?
- 25. Vincular eventos a elementos añadidos dinámicamente
- 26. ¿Cómo comprobar si hay detectores/manejadores de eventos de JavaScript conectados a un elemento/documento?
- 27. clase de colección Adecuado para los detectores de eventos en Java
- 28. añadir eventos a Rafael elementos
- 29. jQuery atribuir automático añade a los elementos
- 30. jQuery - Acceso a los elementos secundarios anidados
Una solución de vainilla JS: http://stackoverflow.com/a/27373951/1385441 –