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