Addinf прослушиватели событий для динамически добавленных элементов - HTML/JS

Question

Я пытаюсь добавить прослушиватели событий для элементов HTML, которые были динамически добавлены с помощью JavaScript. Что-то вроде У меня есть DIV в моей главной странице

<div id="someid"></div> 

и по нажатию кнопки с его EventListener как

document.getElementById("someid").innerHTML = "<input type='button' id ='ad' value='Add' style='height:30px; width:90px'/>" 
document.getElementById("ad").onclick = notherFunc; 

и эта функция подобна

function notherFunc(){ 
     alert("WORKING") 
} 

Но это не работает. Есть ли способ связать эту кнопку с функцией?

Answer 1

Вам необходимо использовать технику под названием «event delegation». По сути, вам нужно привязать обработчик кликов к существующему элементу и посмотреть, является ли элемент, который был нажат, элементом, который вы ожидали.

document.getElementById("someid").addEventListener("click", function (e) { 

    if (e.target.id === "ad") { 
     notherFunc(); 
    } 

});