Можно ли добавить в массив элементов новые после обновления страницы ajax' ом?

Question

[lagudal]

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

let button = document.getElementsByClassName('button');

Затем задаю обработку события

for (var i = 0; i < button.length; i++) {
  button[i].click(myFuncion);
}

Все работает, вот только после перехода на следующую страницу в пагинации, после того как новый контент в новыми кнопками подгрузился, обработка события не срабатывает, пока принудительно не перезагрузить страницу полностью.
Я так понимаю, это происходит потому, что цикл не затрагивает новые кнопки, поскольку когда собирался массив из них, этих кнопок на странице еще не было.
Можно ли как то решить проблему?

Answer 1

[RidgeA]

1. Добавлять обработчик при отрисовки новых кнопок
или
2. Повесить обработчик на элемент более верхнего уровня, которые не перерисовывается при добавлении новых элементов

Answer 2

[Владимир]

Используйте addEventListener
https://developer.mozilla.org/ru/docs/Web/API/Even...
И вместо того чтобы слушать кнопки напрямую - делегируйте события верхнему элементу а внтри проверяйте event.target