jQuery 'on' no se registra en el menú emergente modal generado dinámicamente
Tenía la impresión de que jQueryon
el controlador de eventos estaba destinado a poder "escuchar" los elementos creados dinámicamente Y que se suponía que debía reemplazar el comportamiento delive
. Sin embargo, lo que he experimentado es que usandoon
no está capturando el evento click mientras que usalive
está teniendo éxito!
El aspecto delicado de mi situación es que no solo estoy creando contenido dinámicamente sino que lo estoy haciendo a través de un AJAX.get()
llamar, e insertar el HTML resultante en un modal.dialog()
jQueryUI emergente
Aquí hay una versión simplificada de lo que estaba tratando de lograr (incluida en$(document).ready(...)
):
$.get("getUserDataAjax.php", queryString, function(formToDisplay) {
$("#dialog").dialog({
autoOpen: true,
modal: true,
buttons...
}).html(formToDisplay);
});
$(".classThatExistsInFormToDisplay").on("click", function() {
alert("This doesn't get called");
});
De la documentación paraon
Encontré esto, que era como me acercaba a escribir mion
evento:
$("p").on("click", function(){
alert( $(this).text() );
});
Sin embargo, por alguna razón,live
funcionará como espero - mientras queon
me esta fallando
Esto no es una pregunta para "¿Cómo puedo hacer que funcione?" porque he encontrado queon
Tendrá éxito (captura clics) si lo declarodentro lafunction(formToDisplay)
llamar de vuelta.
Mi pregunta es: lo que está mal conon
¿Que no está encontrando mis elementos creados dinámicamente dentro de una ventana emergente modal? Mi instancia de jQuery es jquery-1.7.2. jQueryUI es 1.8.21.
Aquí hay dos jsFiddles que se aproximan al problema. Haga clic en la palabra "Prueba" en ambos casos para ver el comportamiento diferente. La única diferencia en el código es reemplazaron
paralive
.
Dóndeel clic es capturado porlive
.
Dóndeel clic NO es capturado poron
(haga clic en 'Prueba - haga clic en mí' para ver que no pase nada).
Me doy cuenta de que puedo estar usandoon
inapropiadamente o pidiéndole que haga algo que no fue pensado pero quiero saberpor qué no funciona (pero si tiene algo terriblemente inteligente, no dude en compartirlo). Gracias por tu sabiduría!
Actualización / Respuesta / Solución:
Según el usuario 'indefinido', la diferencia es queon
no está delegado desde la parte superior de ladocument
objeto mientraslive
hace / es.
Como menciona Claudio, hay porciones de laon
Documentación que hace referencia a elementos creados dinámicamente.y eso lo que incluyes en el$("")
parte de la consultanecesita existir en tiempo de ejecución.
Aquí está mi nueva solución: capturar eventos de clicon
mi diálogo modal, que, aunque no tiene ningún contenido cuando el evento se crea en tiempo de ejecución, podrá encontrar mi contenido y elemento con una clase especial que se genera más adelante.
$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() {
... //(success! Event captured)
});
¡Muchas gracias!