javascript - 将 onclick 事件分配给多个按钮

Question

我正在编写代码以根据用户输入生成多个按钮

    for(var loop = 0; loop < up.length ; loop++){
document.write('<button style="background-color:'+ up[loop] +';width:100;height:100" </button>');

}

但是我希望每个按钮都具有相同的 onclick 功能，但是如果我像下面这样使用，则该功能不会被执行。有什么问题，我哪里出错了？请帮忙。

document.write('<button style="background-color:'+ up[loop] +';width:100;height:100" onclick= "myfn()" </button>');

Answer 1

错字，你没有关闭你的开始标签：

 document.write('<button style="background-color:'+ up[loop] +';width:100;height:100" onclick="myfn()"></button>');

始终确保使用 W3c 标记验证服务进行验证：http: //validator.w3.org

您还应该调查隐蔽地附加事件处理程序，内联编写处理程序并不理想。

Answer 2

像这样的东西怎么样（不需要jquery，也不需要document.write）：

var button;
for (i=0; i<5; i++) {
    button = document.createElement('button');
    button.innerHTML = "button - " + i;
    button.addEventListener('click', myFn);
    document.body.appendChild(button);
}


function myFn() {
    alert('button clicked');
}

见这里：http: //jsfiddle.net/yNFqy/1/

Answer 3

1. 使用 jQuery
2. 为按钮添加一个类（总是同一个类）
3. 用户 jQuery 的 click 方法来处理点击

$('.class-name).click(function() { alert("click"); });