Cargo mi archivo JavaScript en mi página de inicio, luego navego a la página donde necesito una función onclick. El onclick se adjunta al contenido que se ha cargado dinámicamente a lo largo del tiempo a través de llamadas AJAX. Los elementos que trato de alcanzar se construyen como:
<a href="#" id="query_2" class="list-group-item query">Alle huurdergegevens</a>Y en mi archivo JavaScript escribí esto:
$(".query").click(function() { var id = $(this).attr('id'); id = id.replace(/\D/g,''); console.log(id); exeSQL(id); });Cuando hago clic en el elemento, literalmente no pasa nada... No se registra nada en la consola, tampoco hay errores... No puedo entender qué estoy haciendo mal tbh...
cuando carga cualquier elemento en DOM después de que se crea DOM, entonces debe manejar un evento de clic como este con el uso on
$(document).on("click",".query",function() { var id = $(this).attr('id'); id = id.replace(/\D/g,''); console.log(id); exeSQL(id); });Tienes que usar esta sintaxis para eventos en contenido dinámico
$(document).on('click','.query',function() { var id = $(this).attr('id'); id = id.replace(/\D/g,''); console.log(id); exeSQL(id); });Ver un ejemplo:
$(document).on('click', '#myButton', function(){ alert('ok') }) <html> <head> </head> <body> <input type="submit" id="myButton"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> </body> </html>Para cualquiera que se tope con esto como lo hice yo, lo siguiente es cómo terminé aquí y también por qué la respuesta principal resuelve el problema:
body para mis controladores de eventos: $('body').on('contextmenu', '#myctl', function(e) { La solución en la respuesta superior resolvió mi problema porque usó $(document) para vincular los controladores de eventos en lugar de $('body') .
¿Por qué?
La razón por la que pasar a $(document) resuelve el problema es que $('body') no existe en el archivo JS externo. Al usar $(document) , JQuery puede adjuntar el controlador de eventos a algo que realmente existe y los controladores de eventos comienzan a funcionar nuevamente.
Resumen
Si usa controladores de eventos (para estadísticas o elementos dinámicos) en archivos JS externos, use $(document).on(...) en lugar de $('body').on(...) .