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

Question

Я использую Browserify для работы с модулями (обязательно) в JS. Но когда я отрисовываю элемент в js-файле и хочу повесить на него событие (onclick), появляется следующая ошибка

Uncaught TypeError: Cannot set property 'onclick' of undefined

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

Answer 1

Для этого вы можете использовать делегирование события . Обычно вы добавляете прослушиватель событий в document. В методе обработчика вы проверяете событие target на отличительное свойство. Если target содержит свойство, сделайте что-нибудь, если нет, ничего не произойдет. Таким образом, позже добавленные элементы могут быть обработаны.

// add a listener to document
document.addEventListener("click", showClick);

// ad a new element to the DOM
const newElement = document.createElement("div");
newElement.innerHTML = "I am new! Click me!";
newElement.id = "new";
newElement.style.cursor = "pointer";
document.body.appendChild(newElement);

// this handles all clicks
function showClick(evt) {
  // if it's div#new, do something
  if (evt.target.id === "new") {
    console.log("there we are!");
  }
  // otherwise nothing happens
}

<div id="notnew">I exist after page load. Try clicking me, I dare you!</div>

Answer 2

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

Нет способа сделать это. Вы должны изменить логику вашего приложения. Вы можете прослушать событие onClick на родителя. А затем выберите элемент, чтобы выбрать новый, который вам нужен.