How to apply add_event_listener() on newly created element?

Question

I am using this script to apply add_event_listener() when the DOM is already loaded.

document.addEventListener("DOMContentLoaded",regFunct,false);

then I list all the function inside regFunct function. all the function inside the regFunct which is loaded from the server are working except the newly created element using appendChild() .

function regFunct(){
    //doSomething1
    //doSomething2 (create new HTML element)

    //doSomething3 (apply add_event_listener() after
    //              the new element created by doSomething2)
}

doSomething3 is not working.

Answer 1

For elements that are created only after the DOMContentLoaded event already fired, you can create a delegate listener .

Here's one possible approach. Let's assume you want to listen to the click event on a dynamically added button that has the id myNewButton :

 document.addEventListener('DOMContentLoaded', function(event) { // lets create and add the button only when DOMContentLoaded has already fired let btn = document.createElement('button'); btn.id = "myNewButton"; btn.type = "button"; btn.textContent = "My shiny new button"; document.getElementById('app').appendChild(btn); }) // before the above is executed, let's add a delegate click listener document.addEventListener('click', function(event) { if (event.target.id === 'myNewButton') { event.target.textContent += " was clicked!"; } }) 

 <div id="app"></div> 

Please note that this only works for events that bubble . Examples of events that don't bubble by default: scroll , blur , focus .