Hice este pequeño index.html para preguntar cómo funciona el manejo de eventos en javascript.
Como puede ver, al final declaré un evento y luego agregué dinámicamente el elemento a mi DOM.
El problema con esto es que el controlador de eventos parece no tener en cuenta una vez que agrega el elemento que coincide con un evento.
Traté de usar .on() al lado de .click() pero no hubo cambios en el resultado. S La pregunta es cómo procesar para agregar un evento a un elemento que se agrega dinámicamente al DOM.
¿Hay alguna solución para volver a cargar o agregar el evento al controlador de eventos?
¿O debería siempre lograr declarar mi evento solo después de declarar mi elemento y deshabilitarlo una vez que elimine el elemento?
TLDR:
Intento encontrar una manera de declarar un evento y luego agregar el elemento DOM coincidente, ¿es posible?
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.13.0-rc.3/jquery-ui.js" integrity="sha256-tYLuvehjddL4JcVWw1wRMB0oPSz7fKEpdZrIWf3rWNA=" crossorigin="anonymous"></script> </head> <body> </body> </html> <script type="text/javascript"> $("#searchBar").autocomplete({ source: [ "Pomme", "Poire", "Fraise", "Banane" ], }); $( "#searchBar" ).on( "autocompleteselect", function( event, ui ) { console.log("ok"); }); $("#btn").on("click", function() { console.log("click"); }); $("body").append('<input id="searchBar" type="text" name="" value="">'); $("body").append('<button id="btn" type="button" name="button">Bouton</button>'); </script>