addEventListener不适用于动态创建的按钮

Fergoso 发表于 Dev

费戈索

我正在动态创建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);

阿伦·P·约翰尼

您可以获取所有按钮元素，并使用循环添加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);
}

演示：小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。