I have search the forums here, but still could not find the right answer. I see solutions with jQuery which I am not familiar with. I am looking for vanilla JavaScript solution please. In short, I create elements dynamically with Ajax and I need to add event listeners to them once they are created. The js here privides suggestions when a user starts typing in input boxes. The code works fine if the input is static, but does not with dynamic. I know DOM gets constructed on load and those elements do not exist yet at the time of loading.
Main page:
<head>
<script src="../js/autocomplete-type.js"></script>
<script>
window.addEventListener("load", function(){
suggest.attach({
target : "NCustType",
url : "../private/searchdbtype.php",
data : { type: "CustType" }
});
})
</script>
</head>
autocomplete-type.js is pretty long, so not sure if I should post it here.
body on load:
<table id='CustDetails'></table>
Ajax fills this table with the following innerHTML (posting here just one element):
<tr>
<td>Customer Type</td>
<td><input type='text' id='NCustType'></td>
</tr>
So I need to add an event listener with function "suggest" with attachments {} to input box with id='NCustType'. I will appreciate help with JavaScript suggestions! I am not a pro with coding but this issue drives me crazy. And I would like to avoid jQuery please.
This part of the code (in automcomplete-type.js) adds a listener:
suggest.instance[opt.target].input.addEventListener("keyup", function (evt) {
// Clear old timer
if (suggest.instance[opt.target].timer != null) {
window.clearTimeout(suggest.instance[opt.target].timer);
}
However, the file is generic and is used for different fields
So how do I call that js file AND function in 'head' (with parameters) after Ajax fires?