When working with JavaScript, you may have encountered an issue where your event listeners don’t work on dynamic elements while they work with your original elements.
What is dynamic element?
Dynamic element is element that is added using JavaScript dynamically and not available during the initial page load.
Now, let’s go into an example. Look at the following html and javascript code. You can try copy and paste the following code to your text editor and open it in your browser.
On initial page load, we have an existing div (we’ll call it static element) and a button that has an event listener for onclick event.
On the button click, a new div (we’ll call it dynamic element) will be added below the static element as the event listener code can be seen at line 10-19 of the code above.
At line 21-26, we set an event listener on the dynamic element for onclick event. On the element click, we want to remove the element from the page.
Please try it in your browser. Does it work? No.
Why is that? Maybe as you already guessed it, it’s because when the page loads and event listener is registered, the dynamic element doesn’t exist yet and when the dynamic element is added, it doesn’t have any event listener with it.
So how do you make the event listener to work with the dynamic elements?
You have 2 options to accomplish this task:
1. Set event listener to the dynamic element immediately after you add it
Look at the following code:
The code is identical with the first one except at line 19 and line 22-27. At line 19 we call a function setListener() to set event listener to the new dynamic element. So after adding the element, we immediately register an event listener on to it.
At line 22-27, we define the setListener() function that we use to set the element event listener.
If you open the page in your browser and try to click the dynamic element, you can see that the event listener works now and the element will be removed.
2. Set event listener on document object globally
The second option is a little bit more advanced. Basically you set the event listener on document object instead of the element itself.
Look at the following code:
As you can see, the event listener is added to the document object. So when a click event happens anywhere on the page, the event listener is triggered and traverse down through the document tree until it reached the trigger element.
This way, you don’t need to add event listener(s) every time you add an element to the page.
The implementation of the second option also vary. You can create a function that will register global event listener so you don’t have to type some repetitive code. Here is an example:
By using the function, you can simply define the event listener for future dynamic elements like this:
At line 21-40, we define the function. In the function we have a check logic (line 32) to target element that has certain selector by using e.target.matches( selector ). This logic will make sure only event on elements that have the selector will get triggered.
At line 42-44, we set click event listener on all elements including dynamic elements that have .dynamic selector. This event listener will work on existing and dynamic elements.
Do you have other solution to set event listener on dynamic elements? Or do you have any feedback? Please let us know in the comments below.
Thanks, it helped me a lot!
Glad it helped you. 🙂