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

我正在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/

当你使用类似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>

相关内容

最新更新

热门标签：