Как запустить скрипт, если он думает что элемента нет?

Question

[Nube]

Я загрузил страницу с файлом js в конце body. Теперь нажав на кнопку "A" я загрузил в div новую разметку с кнопкой "B", страница при этом не была перегружена т.к я использую webscoket. Теперь я хочу что бы произошло событие нажав на кнопку "B", но этого не происходит оно и понятно когда js был загружен кнопки "B" не было. Консоль по этой причине ругается выдавая Cannot read property 'addEventListener' of null . Как можно это исправить, как сделать что бы он начал искать элемент после загрузки новой разметки ?

Answer 1

[Златослав Десятников]

Вешайте listener на родительский элемент, в который динамически добавляются элементы. В этом лисенере проверяйте по какому именно элементу произошёл клик.

Comments

[Златослав Десятников]

В jQuery это реализовано следующим образом:

$('.some-parent-class').on('click', '.child-async-element', func(e) {});

Answer 2

[Павел Корнилов]

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

<ul onclick="fn(event)" fsish="16">
    <li name="one">один</li>
    <li name="two">два</li>
    <li name="three">три</li>
    <li name="four">четыре</li>
    <li name="five">пять</li>
  </ul>
  <script>
  function fn (e) {
    alert(e.target.getAttribute('name'));
    e.stopPropagation();
  }
  </script>