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

您可以獲取所有按鈕元素，並使用循環添加click事件處理程序

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);
}

演示： 小提琴

---

另一種方法是在循環中創建一個按鈕元素

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);
}

演示： 小提琴