Как применить add_event_listener () к вновь созданному элементу? - PullRequest
Новая
       29

Как применить add_event_listener () к вновь созданному элементу?

0 голосов
/ 24 января 2011

Я использую этот скрипт для применения add_event_listener (), когда DOM уже загружен. 

document.addEventListener("DOMContentLoaded",regFunct,false);

затем я перечисляю все функции внутри regFunct функции. все функции внутри regFunct, загруженные с сервера, работают, кроме вновь созданного элемента, использующего appendChild(). 

function regFunct(){
    //doSomething1
    //doSomething2 (create new HTML element)

    //doSomething3 (apply add_event_listener() after
    //              the new element created by doSomething2)
}

doSomething3 не работает.

1 Ответ

0 голосов
/ 12 октября 2018

Для элементов, которые создаются только после события DOMContentLoaded, которое уже запущено, вы можете создать делегат слушателя .

Вот один из возможных подходов. Предположим, вы хотите прослушать событие click для динамически добавляемого button с id myNewButton: 

document.addEventListener('DOMContentLoaded', function(event) {
  // lets create and add the button only when DOMContentLoaded has already fired
  let btn = document.createElement('button');
  btn.id = "myNewButton";
  btn.type = "button";
  btn.textContent = "My shiny new button";
  document.getElementById('app').appendChild(btn);
})

// before the above is executed, let's add a delegate click listener
document.addEventListener('click', function(event) {
  if (event.target.id === 'myNewButton') {
    event.target.textContent += " was clicked!";
  }
})
<div id="app"></div>

Обратите внимание, что это работает только для событий, которые bubble . Примеры событий, которые не всплывают по умолчанию: scroll, blur, focus.

...