Как открыть событие по добавленному элементу?

Question

[anton_trofimov95]

Есть код

const openModals = document.querySelectorAll('.open-modal')
const modalBg = document.querySelector('.modal-bg')

for (openModal of openModals) {
    openModal.onclick = function() {
        modalBg.classList.toggle('modal-bg__active')
    }
}

Открывает по клику на элемент с классом .open-modal модалку. Если в верстке сделать кнопку с этим классом - все работает

Но если я добавляю элемент через js

const uls = document.querySelectorAll('.third-block-flex__item__body ul')
const button = document.createElement('button')

button.className = 'button open-modal'
button.innerText = 'Хочу этот пакет'
for (ul of uls) {
    ul.after(button)
}

То клик уже не работает и добавляется только в одном месте. Как решить данную проблему?
Код

Answer 1

[Александр]

const uls = document.querySelectorAll('.third-block-flex__item__body ul');

for (let ul of uls) {
	const button = Object.assign(document.createElement('button'), {
		className: 'button open-modal',
		textContent: 'Хочу этот пакет'
	});
	button.addEventListener('click', ВАШ_ОБРАБОТЧИК);

	ul.after(button);
}

Answer 2

[historydev]

Ваш подход к задаче не правильный, ознакомьтесь с .map() и с forEach

click

Comments

[anton_trofimov95]

Где не правильный то? Вы мне скинули то, что и по моему методу работает. Циклы of и forEach то же самое в моем случае выполняют. А вы сразу подход не правильный
Вы меня не поняли наверное. Мой метод работает если кнопку в верстке прописать

<button class="button open-modal">Хочу этот пакет</button>

Но если через js добавляю, то кнопка с этим классом не открывает модалку

Вот код

[historydev]

anton_trofimov95, вешайте классы до обработки, ждите завершения и обрабатывайте

[historydev]

anton_trofimov95, обновил, проверяйте.