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

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 中的前一个事件处理程序

dynamically added event handler disables the previous one in Javascript

javascript

event-handling

javascript-events