How to add a class to dynamically created element

Question

I want to add listener to dynamically created element in JavaScript but It doesn't seem to work. It throws no error so I have no idea on what i have to begin with. Do you have any ideas?

{
  const API_KEY = "9829fe5eab6c963bbe4850df2d7de4aa";
  const container = document.getElementById("container");
  const flippers = document.getElementsByClassName("header__flipper");
  const cityTemplate = () => {
    const template = `<section class="weather">
      <button class="header__flipper"><span aria-hidden="true">&rarr;</span></button>
      <header class="header">
        <h1 class="header__heading">dfgdfgd
        </h1>
      </header>
    </section>`;
    return template;
  };
  const addListeners = (collection, ev, fn) => {
    for (let i = 0; i < collection.length; i++) {
      collection[i].addEventListener(ev, fn, false);
    }
  }
  const req = (id, key) => {
    const url = `https://api.openweathermap.org/data/2.5/forecast?id=${id}&APPID=${key}`;
    fetch(url).then((res) => {
      res.json().then((data) => {
        container.innerHTML += cityTemplate(data);
      });
    })
  }
  req("6695624", API_KEY);
  req("6695624", API_KEY);
  req("6695624", API_KEY);
  addListeners(flippers, "click", () => {
    alert("test");
  })
}

<div id="container"></div>

@miqezjo - the errors says your API_KEY is invalid. Swellar - backticks are for creating template literals - very handy! — Brett DeWoody, Oct 13 '17 at 06:41
backticks are use in *NODE* in javascript if you want to declare a string you have to put it in single quote or double. — Liaqat Saeed, Oct 13 '17 at 06:47

Brett DeWoody · Answer 1 · 2017-10-13T09:05:16.867

The core issue is due to the req() function being asynchronous - meaning the req() function is called but it finishes at some unknown point in the future. While each req() is waiting to finish the script continues and the addListeners() function is called, using the .header__flipper selector - but due to the asynchronous behavior the .header__flipper elements aren't created yet so the event listeners aren't added.

As a demo, I've added a timeout to the addListeners() function so it waits 1 second before being called. This gives the req() functions time to complete and allows the event listeners to attach correctly.

However - setTimeout() IS NOT the solution - the snippet below is only for demonstrating the issue, scroll down for the correct solution.

{
  const API_KEY = "9829fe5eab6c963bbe4850df2d7de4aa";
  const container = document.getElementById("container");

  const cityTemplate = () => {
    const template = `<section class="weather">
      <button class="header__flipper"><span aria-hidden="true">&rarr;</span></button>
      <header class="header">
        <h1 class="header__heading">dfgdfgd
        </h1>
      </header>
    </section>`;
    return template;
  };
  const addListeners = (collection, ev, fn) => {
    for (let i = 0; i < Array.from(collection).length; i++) {

      collection[i].addEventListener(ev, fn, false);
    }
  }
  const req = (id, key) => {
    const url = `https://api.openweathermap.org/data/2.5/forecast?id=${id}&APPID=${key}`;
    fetch(url).then((res) => {
      res.json().then((data) => {
        container.innerHTML += cityTemplate(data);
      });
    })
  }
  req("6695624", API_KEY);
  req("6695624", API_KEY);
  req("6695624", API_KEY);

  // For Demo Only
  // The req() function is asynchronous so the addListeners() function was attempting to attach to the elements before they were created
  window.setTimeout(function() {
    addListeners(document.getElementsByClassName("header__flipper"), "click", () => {
      alert("test");
    })
  }, 1000)

}

<div id="container"></div>

Solution

The solution is to attach the event listeners to a parent selector (as @Nishad has recommended). The idea is to attach the click event listener to a parent element (like #container), and within the listener callback function check if the event target is one of the new dynamic elements.

In your case, the addition of the <span class="header__flipper__aria" aria-hidden="true">→</span> within the button complicates things a bit because the event target could be either the <button> or the <span>. This requires us to check if the event target is either of those elements.

{
  const API_KEY = "9829fe5eab6c963bbe4850df2d7de4aa";
  const container = document.getElementById("container");

  const cityTemplate = () => {
    const template = `<section class="weather">
      <button class="header__flipper"><span class="header__flipper__aria" aria-hidden="true">&rarr;</span></button>
      <header class="header">
        <h1 class="header__heading">dfgdfgd
        </h1>
      </header>
    </section>`;
    return template;
  };
  const addListeners = (collection, ev, fn) => {
    collection.addEventListener(ev, fn, false); 
  }
  const req = (id, key) => {
    const url = `https://api.openweathermap.org/data/2.5/forecast?id=${id}&APPID=${key}`;
    fetch(url).then((res) => {
      res.json().then((data) => {
        container.innerHTML += cityTemplate(data);
      });
    })
  }
  req("6695624", API_KEY);
  req("6695624", API_KEY);
  req("6695624", API_KEY);

  addListeners(document.getElementById("container"), "click", (event) => {
    var classes = event.target.classList;
    if (classes.contains("header__flipper") || classes.contains("header__flipper__aria")) {
      alert("test");
    }
  })

}

<div id="container"></div>

Alternative Solution

An alternative would be to attach the event listener to the button within each dynamic element in the callback when the dynamic element is created, like this:

{
  const API_KEY = "9829fe5eab6c963bbe4850df2d7de4aa";
  const container = document.getElementById("container");

  const cityTemplate = () => {
    const newEl = document.createElement("section");
    newEl.classList.add("weather");
    
    const template = `<button class="header__flipper"><span class="header__flipper__aria" aria-hidden="true">&rarr;</span></button>
      <header class="header">
        <h1 class="header__heading">dfgdfgd
        </h1>
      </header>`;
    newEl.innerHTML = template;
    return newEl;
  };
  
  const req = (id, key) => {
    const url = `https://api.openweathermap.org/data/2.5/forecast?id=${id}&APPID=${key}`;
    fetch(url).then((res) => {
      res.json().then((data) => {
        const city = cityTemplate(data);
        city.querySelector("button").addEventListener("click", function(){
          alert("test");
        }, false);
        container.appendChild(city); 
      });
    })
  }
  req("6695624", API_KEY);
  req("6695624", API_KEY);
  req("6695624", API_KEY);
}

<div id="container"></div>

Thanks for the explaining. I have one more question. Should I change this button somehow or it's ok? I mean is there any way to get rid of checking if classes contains header__flipper__aria? — miqezjo, Oct 13 '17 at 07:42
A few options - one would be to make the `` take up the full size of the ` — Brett DeWoody, Oct 13 '17 at 07:50
@miqezjo - i added an alternative solution which might be easier to understand. It attaches the event listener to each button when each new element is created. — Brett DeWoody, Oct 13 '17 at 09:06
@miqezjo - don't forget to accept the solution that solves your question ;) — Brett DeWoody, Oct 13 '17 at 09:24

Thijs · Accepted Answer · 2017-10-13T08:34:12.407

The problem is that you add the event listeners before the fetch requests have completed. The triggers aren't yet in the DOM at the time you call addListeners.

I've modified the req method to return the promise for the fetch. With a Promise.all the code will wait till all three fetches are done. This still doesn't fully solve the problem, the code knows when the fetches are done but that is not the same as the req method having added the cityTemplate to the DOM.

Two solutions come to mind:

Use a setTimeout in the Promise.all handler. This will most likely delay adding the event listeners long enough for the templates to be added in the DOM. I've added some console.log statements that will show the Promise.all log line appears before the last rendered log line.
Have the req method return a promise that you create yourself, instead of the fetch promise. Resolve the self created promise after the cityTemplate has been added to the DOM. This way you know for sure that the Promise.all won't get fulfilled until everything is in the DOM.

Solution 1 is not a very robust solution and should be avoided. Solution 2 provides the kind of control you want. My answer show a basic setup for solution 2, it doesn't do any kind of error handling.

{
  const API_KEY = "9829fe5eab6c963bbe4850df2d7de4aa";
  const container = document.getElementById("container");
  const flippers = document.getElementsByClassName("header__flipper");
  const cityTemplate = () => {
    const template = `<section class="weather">
      <button class="header__flipper"><span aria-hidden="true">&rarr;</span></button>
      <header class="header">
        <h1 class="header__heading">dfgdfgd
        </h1>
      </header>
    </section>`;
    return template;
  };
  const addListeners = (collection, ev, fn) => {
    for (let i = 0; i < collection.length; i++) {
      collection[i].addEventListener(ev, fn, false);
    }
  }
  const req = (id, key) => {
    console.log(`getting ${id}`);
    // Return a new promise, this promise will be fulfilled once the template
    // has been added with the retrieved data.
    return new Promise(resolve => {
      const url = `https://api.openweathermap.org/data/2.5/forecast?id=${id}&APPID=${key}`;
      // Get the data
      fetch(url).then((res) => {
        res.json().then((data) => {
          // Add the template to the DOM
          container.innerHTML += cityTemplate(data);
          console.log(`rendered ${id}`);
          // Relove that promise that was returned by the method.
          resolve();
        });
      })    
    });
  }
  
  // Wait for all three promises to be done. These promises will be fulfilled after
  // the DOM has been updated.
  Promise.all([req("6695624", API_KEY), req("6695624", API_KEY), req("6695624", API_KEY)])
    .then(() => {
      console.log(`promise all done`);
      // There is no longer a need for a timeout, due to the change to the 
      // req method.
      addListeners(flippers, "click", () => {
        alert("test");
      })          
    });
}

<div id="container"></div>

Thanks for the help! Could I do it without setTimeout maybe? Are there any alternatives using promises? — miqezjo, Oct 13 '17 at 08:09
@miqezjo I've updated the answer so it uses the promise solution. — Thijs, Oct 13 '17 at 08:14
Oh, I see. I'm not that familiar with promises but I will try. Thanks once more — miqezjo, Oct 13 '17 at 08:18

Nishad K Ahamed · Answer 3 · 2017-10-13T06:47:32.557

0

you need to use the below code snippet to trigger click event for dynamically created elements

$(document).on("click", ".className", function(){
    alert('this works')
});

for JavaScript solution, you can refer this : adding onclick event to dynamically added button?

edited Oct 13 '17 at 06:47

answered Oct 13 '17 at 06:41

Nishad K Ahamed

1,374
15
25

Any non jQuery solutions? – miqezjo Oct 13 '17 at 06:45
I want to stick to template strings and addEventListener – miqezjo Oct 13 '17 at 06:58

How to add a class to dynamically created element

3 Answers3

Solution

Alternative Solution