Как исправить чтоб при добавлении блоков click работал лишь один раз на один элемент?

Question

[mirikkingg]

Такой вопрос, есть ивент, который добавляет блоки в массив, далее на массиве слушается click на один (должен) из элементов, но каждый раз когда вызывается click он срабатывает столько раз - сколько было создано блоков в родителе (если кликнуть на 0 элемент - выведется лишь раз, на 1 - два раза, на 2 - три раза..).



Так выглядит лог без клика.

const checkBoxes = () => { 
    let trackBoxes = document.querySelectorAll('.chartsCard'); // Карточки в массиве
    trackBoxes.forEach(item => {
        item.addEventListener('click', () => {
            const trackIndex = event.currentTarget // Проверка на какой блок нажали
            console.log(trackIndex) //
        })
    })
}

let trackSection = document.querySelector('.charts') // Мэйн блок в который дописываются блоки
trackSection.addEventListener('DOMNodeInserted', checkBoxes); // Отслеживаю добавление блоков

Answer 1

[Rsa97]

Надо либо навешивать обработчик на конкретный элемент при его создании (а не на все элементы каждый раз), либо вешать его на родительский статичный элемент и использовать всплытие.