addEventListener не работает на динамически созданной кнопке

Question

Я создаю 3 кнопки динамически. Теперь мне нужно добавить событие onclick. Как я могу сделать работу onclick?

var btns=''; 
var category = ["fur_", "fts_", "fas_"]; 
for(i = 1; i < category.length; i++){ 
    btns +='<button type="button" class='+category[i]+' id= "myBtn'+i+'">Button</button>'; 
} 
document.getElementById('div').innerHTML = btns; 


var button = document.getElementById('myBtn1'); 
button.addEventListener('click', function() { 
    alert('Clicked'); 
}, false); 

Answer 1

Вы можете получить все элементы кнопки и добавить обработчик событий нажмите с помощью цикла

var btns = ''; 
var category = ["fur_", "fts_", "fas_"]; 
for (i = 1; i < category.length; i++) { 
    btns += '<button type="button" class=' + category[i] + ' id= "myBtn' + i + '">.....</button>'; 
} 
var div = document.getElementById('div'); 
div.innerHTML = btns; 

var handler = function() { 
    alert('Clicked'); 
}; 
var buttons = div.querySelectorAll('button'); 
for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener('click', handler, false); 
} 

Демо: Fiddle

---

Другой подход заключается в создании кнопки элемента в петля

var div = document.getElementById('div'); 
var btn; 
var category = ["fur_", "fts_", "fas_"]; 
var handler = function() { 
    alert('Clicked'); 
}; 
for (var i = 1; i < category.length; i++) { 
    btn = document.createElement('button'); 
    btn.cassName = category[i]; 
    btn.cassName = 'myBtn' + i; 
    btn.innerHTML = '....'; 
    btn.addEventListener('click', handler, false); 
    div.appendChild(btn); 
} 

Демонстрация: Fiddle