Как записать addEventListener если нет еще кнопки при загрузки?

Вот у меня допустим разных три addEventListener на клик, но еще нет селекторов после загрузки сайта. Они появляются в определенный момент, и при загрузке страницы в консоли выдает Cannot read property 'addEventListener' of null, потому что нет селектора такой переменной еще. Как можно исправить такое?


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

Автор решения: Pavel Grishaev

Вот некоторые возможные решения:

  1. Подключить скрипт внизу страницы, а не вверху. Тогда он сработает, когда уже есть все элементы.
  2. Использовать делегирование событий. То есть добавить обработчик на родительский элемент, и уже там проверять какой элемент был нажат. Это если родительский элемент существует. По крайне мере body есть всегда, но советую выбрать более близкий родитель, желательно непосредственный.
  3. Проверять наличие элементов интервалом. Например раз в 200 миллисекунд (число на ваш вкус). Потом когда элементы обнаружены, сделать с ними дело, и убрать интервал. Интервал ничего ощутимо не ухудшит, однако обычно считается что так делать не следует.
  4. Использовать событие DOMContentLoaded или если используете jQuery - метод ready.
  5. Если элементы загружаются и вставляются в документ отдельно, то добавлять к ним обработчики событий можно в момент их вставки.
→ Ссылка