How to bind events to dynamically created elements in JavaScript

This post was originally published at webinuse.com

When working with JavaScript and DOM, we often find ourselves in need of creating some elements dynamically. Especially when working with some tables and fetching data from the server. Sometimes we have to bind events to dynamically created elements. And that is exactly what we are going to do now.

When jQuery was in use (it is still today, but not as much as before) we would do by simply attaching the event to body, and then attaching it to the element. Basically, jQuery would find that element for us in the DOM tree and run the desired function. Lets see an example.

$("body").on("click", "dynamic-element", function(){});

In the example above, jQuery would attach events to dynamically created elements, or any elements for that matter, that we have passed as a parameter.

Bind events to dynamically created elements through bubbling

The first way we are going to try is to attach events to dynamically created elements using a method of bubbling. What does this mean? This means that we are going to target the parent instead of the actual element. And, then, we are going to check if a user clicked on the element or somewhere else.

<div id="container">    <button class="click-btn">The First Button</button></div><script>    /**     * First, we select parent element     * */    const container = document.querySelector("#container");    /**     * After that we add event listener to that element     * */    container.addEventListener("click", function(e){        /**         * Then, we check if we clicked on an element that has         * .click-btn class         * */        if (e.target.classList.contains('click-btn')) {            /**             * If we have clicked on such element we             * run some function             * */          alert(`You have clicked ${e.target.innerHTML}`);        }    })    /**     * Now let's create our dynamic element     * Another button     * */    const btn = document.createElement("button");    /**     * In order for event bubbling to work,     * we have to add the same class as we used     * in our eventListener     * */    btn.className = "click-btn";    //Then we add some text inside that button    btn.innerText = "The dynamically created button";    //And we append it    container.appendChild(btn);</script>

As we can see in the example above, we have added eventListener to the parent, but it will run only if a user clicks on an element with a class click-btn.

After weve done that, we dynamically created another button with the same class. And by the logic of things, eventListener will run the same function on that button, as on the one we created in HTML.

How to dynamically attach events to dynamically created elements

The second way to bind events to dynamically created elements is by creating a function and running that function on the elements weve created. Sounds confusing? Lets create some examples.

<div id="container">    <button class="click-btn">The First Button</button></div><script>/** * First let's create a function * */function dynamicFunction(e) {    e.preventDefault();    alert(`You have clicked on ${e.target.innerHTML}`)}/** * Now let's create our dynamic element * *///First we select our containerconst container = document.querySelector("#container");//Then, we create a buttonconst btn = document.createElement("button");//Then, we add it the same as their respective siblingsbtn.className = "click-btn";//Now, we add it some textbtn.innerText = "The dynamically created button";//Lastly, append it to the containercontainer.appendChild(btn);/** * Since we are going to attach eventListener to a class * we need a loop * */ //Let's store our elements to variable const elements = document.querySelectorAll(".click-btn"); //Then, we loop through those elements for(let i = 0; i < elements.length; i++) {     //We add eventListener to each element     elements[i].addEventListener("click", dynamicFunction); }</script>

What we did in this example is instead of setting the event to parent, we set it to the exact elements.

But there is a catch. If we created our button, lets say after we did .fetch() we would need to run a loop again. Why? Because new elements were not part of the DOM when we run the loop the first time. So we can consider that as a drawback.

Which way is better?

They are equal, depending on our preferences. If we want to write a function once then the first way is better. If we do not mind writing the same code several times, then it does not matter.

If you have any questions or anything you can find me on myTwitter, or you can read some of my other articles like How to simply convert any HTML template into a WordPress theme in under 10 minutes?