Event listener not working after elements are rendered in the dom

Question

I am creating a project that when I click a certain category card I get the id of that category and redirect to movies screen.

I am aware that the row.eventlistener() in index.js it will be executed before the elements are rendered and that is why it does not pick the id. How should I add the event listener to each newly rendered item before adding it to the container so that I can get the id for each category card.

index.js

async function getCategories() {
  let url = 'http://localhost:8080/movieCategories';
  try {
    let res = await fetch(url);
    return await res.json();
  } catch (error) {
    console.log(error);
  }
}


async function renderCategories() {
  let categories = await getCategories();
  let html = '';
  categories.forEach(category => {


    let htmlSegment = `
            <div class="category-card" id=${category.id}>
            <img src="./assets/images/sci-fi.jpg" alt="" class="card-img">
            <div class="name">${category.name}</div>
          </div>
        `;
    html += htmlSegment;
  });
  let container = document.querySelector('.category-grid');
  container.innerHTML = html;
}

 renderCategories();


document.querySelectorAll('div.category-card').forEach(row=>{
  row.addEventListener('click',event=>{
    console.log('Category clicked', event.currentTarget.id)
    window.location= 'movies.html?categoryId=' +event.currentTarget.id;
  });

});

index.html

<section class="category" >
  <h2 class="section-heading">Category</h2>
  <div class="category-grid">
  </div>
</section>

I have tried to put the event listener logic inside but still did not work .In which place exactly inside and how ? — User G Amsterdam, Jun 02 '22 at 13:31
The OP wants to register a single event handler exactly once at the root node (which is ... `document.querySelector('.category-grid')`) and then make use of [event delegation](https://davidwalsh.name/event-delegate). Any content inside of the root node can be removed / replaced / inserted at will without any additional event listening tasks. — Peter Seliger, Jun 02 '22 at 13:45

Ryan Wilson · Answer 1 · 2022-06-02T13:59:24.277

0

You are not awaiting the call to renderCategories, move your event listener logic inside the renderCategories method OR You could use an immediately invoked async function expression or IIAFE for short, more about this here immediately-invoked-async-function-expression:

    (async () => {
        await renderCategories();
        document.querySelectorAll('div.category-card').forEach(row => {
           row.addEventListener('click', event => {
               console.log('Category clicked', event.currentTarget.id)
               window.location= 'movies.html?categoryId=' +event.currentTarget.id;
           });
        });
    })();

edited Jun 02 '22 at 13:59

answered Jun 02 '22 at 13:32

Ryan Wilson

10,223
2
21
40

Not working solution. – User G Amsterdam Jun 02 '22 at 13:48
@UserGAmsterdam Then you aren't using it correctly. This will work. You'll need to use this function after the DOM is loaded. Perhaps you need to wrap it in `window.addEventListener("DOMContentLoaded", ...` – Ryan Wilson Jun 02 '22 at 13:49
There are errors in the brackets . Havent seen it before thats why I dont know how to use it. – User G Amsterdam Jun 02 '22 at 13:52
@UserGAmsterdam There was a missing single quote, typo on my part, try updated. – Ryan Wilson Jun 02 '22 at 14:02

score 0 · Accepted Answer · answered Jun 02 '22 at 13:50

You could also just add the event on the div itself directly when you create it and pass the id or whatever you want.

<div class="category-card" id=${category.id} onclick="onCatClick(${category.id})">

After this, you can move your logic inside a top level onCatClick function.

function onCatClick(id) {
    console.log('Category clicked', id)
    window.location= 'movies.html?categoryId=' + id;
}

This is if your styling/layout doesn't allow you to use an anchor element. Otherwise, you could simply replace the div with an anchor element:

<a href="movies.html?categoryId=${id}"></a>

Tachibana Shin · Answer 3 · 2022-06-02T13:34:23.393

try:

async function getCategories() {
  let url = 'http://localhost:8080/movieCategories';
  try {
    let res = await fetch(url);
    return await res.json();
  } catch (error) {
    console.log(error);
  }
}


async function renderCategories() {
  let categories = await getCategories();
  let html = '';
  categories.forEach(category => {


    let htmlSegment = `
            <div class="category-card" id=${category.id}>
            <img src="./assets/images/sci-fi.jpg" alt="" class="card-img">
            <div class="name">${category.name}</div>
          </div>
        `;
    html += htmlSegment;
  });
  let container = document.querySelector('.category-grid');
  container.innerHTML = html;
}
 //es8
await renderCategories();

// fix timeout async render element
setTimeout(() => {
  document.querySelectorAll('div.category-card').forEach(row=>{
    row.addEventListener('click',event=>{
      console.log('Category clicked', event.currentTarget.id)
      window.location= 'movies.html?categoryId=' +event.currentTarget.id;
    });
  })
});

Event listener not working after elements are rendered in the dom

3 Answers3