gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 09:54:30 25 4
gpt4 key购买 nike

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

关于javascript - 动态添加的事件处理程序会禁用 JavaScript 中的前一个事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30781024/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com