I've made this little index.html to ask how are event handling working on javascript.
As you can see at the end I declared an event and than add dynamicly the element to my DOM.
The problem with this is that the event handler seems to not taking in account once you add the element that match with an event.
I tried to use .on() beside of .click() but no change in the result. S
The question is how to processed to add event to an element that is dynamicly add to the DOM.
Is there a solution to reload or add the event to the event handler.
Or should I just always manage to declare my event only after i declare my element and disable it once I remove the element.
TLDR :
I try to find a way to declare an event and than add the matched DOM element is it possible ?
<!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>
