动态创建一个按钮并设置＆＃34; onclick＆＃34; handler接受多个参数

Question

我需要在循环中动态创建一个按钮并附加＆＃34; onclick＆＃34;事件处理程序，然后处理程序的函数是预定义的，并接受多个参数。

for (var i = 0; .....) {
  var b = document.createElement("BUTTON");
  b.appendChild(document.createTextNode("fdsfdsfd_" + i)); 
  b.onclick = function() {
    var b = getB();
    var c = getC();
    myFunction(i, b, c);
  };

  document.appendChild(b);
}



function myFunction(a, b, c) {

}

但是当我检查thml时，没有＆＃34; onclick＆＃34;属性。

属性innerHTML不适合我的情况。

Answer 1

试试这个

var b = document.createElement("BUTTON");
b.appendChild(document.createTextNode("fdsfdsfd_" + i)); 
b.addEventListener('click', function() {
  console.log('anchor');
});

单击事件无需

和onclick属性

Answer 2

$('#Delta1').click(function() {
  var functions = ['btn1()', 'btn2()', 'btn3()', 'btn4()', 'btn5()', 'btn6()', 'btn7()', 'btn8()', 'btn9()', 'btn10()'];
  var div = document.getElementById('insertHere');
  var ctr = 1;
  for (var i in functions) {

    var btn = document.createElement('button');
    var txt = document.createTextNode(String(ctr));

    btn.appendChild(txt);
    btn.setAttribute('type', 'button');
    btn.setAttribute('onclick', functions[i]);
    btn.setAttribute('id', 'button' + ctr);
    div.appendChild(btn);
    ctr++;
  }
});

function btn1() {
  alert('button 1');
}

function btn2() {
  alert('button 2');
}

function btn3() {
  alert('button 3');
}

function btn4() {
  alert('button 4');
}

function btn5() {
  alert('button 5');
}

function btn6() {
  alert('button 6');
}

function btn7() {
  alert('button 7');
}

function btn8() {
  alert('button 8');
}

function btn9() {
  alert('button 9');
}

function btn10() {
  alert('button 10');
}

<button type="button" id="Delta1">Blast Off!</button>
<div id="insertHere"></div>