Как сделать событие на динамически созданный элемент

Question

Я отправляю GET запрос и получаю массив чисел. После этого я вывожу их на страницу, но не могу с ними взаимодействовать. Ниже представлен кусок кода.

fetch(`url`)
    .then(response => response.json())
    .then(data => {
        createTemplate(data); //функция которая создает элемент
        console.log(data);
    });

function createTemplate(data){
    data.forEach(element => {
        const task = document.createElement('button');
        task.classList.add("task-btn", "btn" ,"bg-green","text-white");
        task.innerHTML = `${element}`;
        tasksWrapper.append(task);
    }); 
}

const taskButton = document.querySelectorAll('.task-btn'); //здесь я пытаюсь получить созданный элемент

taskButton.addEventListener() // и наложить событие

P.S. Возможно я не понимаю чего-то элементарного

Answer 1

Думаю как-то так

// имитируем запрос
//fetch(`url`)
//    .then(response => response.json())
//    .then(data => {
        let data = ["button 1", "button 2", "button 3"] 
        createTemplate(data); //функция которая создает элементы
        //Ваши эдементы появились только тут
        
        const taskButton = document.querySelectorAll('.task-btn'); //здесь я пытаюсь получить созданный элемент

        [...taskButton].forEach(item => item.addEventListener("click", ()=>console.log(item.innerHTML))); // и наложить событие        )
        
        console.log(data);
//    });

   function createTemplate(data){
      data.forEach(element => {
          const task = document.createElement('button');
          task.classList.add("task-btn", "btn" ,"bg-green","text-white");
          task.innerHTML = `${element}`;
          tasksWrapper.append(task);
      }); 
    }

<div id="tasksWrapper"/>

БЛОГ НА HUSL

Как сделать событие на динамически созданный элемент

Ответы (1 шт):