Как повесить обработчик события на элемент который отрисовывается?

Question

[fgehte]

Добрый день! Вот код, который вставляет шаблон в верстку. В шаблоне есть кнопка addProductBtn по нажатию на которую должно срабатывать события и появляться модальное окно(modal). Могу выполнить это же задание только если верстка будет отрисована изначально и в псевдомассиве уже будут элементы кнопки, но если отрисовывать шаблон то уже не получается сделать этого.

const catalogList = document.querySelector('.catalog__list');
    const productCardTemplate = document.querySelector('#product-card').content;
    const newItemTemplate = productCardTemplate.querySelector('.card-product');
    const modal = document.querySelector('.modal-overlay');
    const addProductBtn = document.querySelectorAll('.card-product__add-cart');

    const createCard = () => {
      const newCard = newItemTemplate.cloneNode(true);

      return newCard;
    };

    for (let i = 0; i < 4; i++) {
      catalogList.appendChild(createCard());
    }

Answer 1

[Сергей Соколов]

Делегирование событий

повесьте слушатель событий на catalogList
События клика будут пузыриком подниматься наверх, там и отловите )

Comments

[fgehte]

Хорошо, так работает, спасибо. НО! в этом случае, куда бы я не нажал на дочерние элементы, высплытие происходит в любом случае, а мне надо чтобы модалка открывалась только при нажатие на кнопку. Как заполнить NodeList кнопками, после отрисовки товара в DOM?)

[fgehte]

Всё, теперь точно разобрался с делегированием)) Спасибо. Но вопрос с заполнением NodeList остался интересен, можно ли как то его заполнить элементами после отрисовки шаблона или нет?

[Сергей Соколов]

fgehte, насчёт заполнения кнопками, при создании есть ссылка на добавляемый узел:

const newNode = createCard();
catalogList.appendChild(newNode);

Можно сразу же искать в нём кнопку и добавлять в массив:

const btn = newNode.querySelector('button');
globalBtnsArray.push(btn);

Element.querySelector()

[Сергей Соколов]

Другой вариант, переусложнённый — мониторить изменения DOM, которые происходят при добавлении карточек, и в этот момент заново выполнять поиск кнопок. В этом поможет MutationObserver