Question

我在Javascript中动态创建按钮。还动态地为每个按钮添加一个事件处理程序。对于最后一个按钮它可以工作，但之前的按钮根本不再工作。这是我的一小段代码。我做错了什么？

<html>

<head>
    <script>
    var id = 0;

    function makeFunc(arg) {
        return function() {
            alert('selected ' + arg)
        }
    };

    function addElement() {
        document.getElementById('p1').innerHTML +=
            '<button id=\'id' + id + '\'>Button' + id + '</button>';
        document.getElementById('id' + id).onclick = makeFunc(id);
        id++;
    }
    </script>
</head>

<body>
    <button onclick="addElement();">Add Button</button>
    <p id="p1"></p>
</body>

</html>

它也在这里：http://jsfiddle.net/q52a7fw0/

Answer 1

使用innerHTML时

 document.getElementById('p1').innerHTML +=
            '<button id=\'id' + id + '\'>Button' + id + '</button>';

你覆盖现有的事件处理程序。

相反，你应该创建元素并附加它

function addElement() {
  var button = document.createElement('BUTTON');
  button.id = id;
  button.textContent = 'Button ' + id;
  button.onclick = makeFunc(id);
  document.getElementById('p1').appendChild(button);

  id++;
}

var id = 0;

function makeFunc(arg) {
  return function() {
    alert('selected ' + arg)
  }
};

function addElement() {
  var button = document.createElement('BUTTON');
  button.id = id;
  button.textContent = 'Button ' + id;
  button.onclick = makeFunc(id);
  document.getElementById('p1').appendChild(button);

  id++;
}

<body>
  <button onclick="addElement();">Add Button</button>
  <p id="p1"></p>
</body>

动态添加的事件处理程序在Javascript中禁用前一个

1 个答案: