gpt4 book ai didi

javascript - 动态生成的元素不捕获事件

转载 作者:行者123 更新时间:2023-11-29 16:15:09 24 4
gpt4 key购买 nike

我试图将 onclick 事件附加到动态创建的元素,但只有最后一个元素捕获该事件,...为什么?

这里是代码:

<!DOCTYPE HTML>

<html>
<head><title>Error</title></head>
<body>
<div id="wrapper">
</div>
<script type="text/javascript">
window.addEventListener("load",function(e) {
var wrapper = document.getElementById("wrapper");
for(i=1;i<5;i++) {
wrapper.innerHTML += "<p><textarea id='text" + i + "'></textarea></p>";
text = document.getElementById("text" + i);
text.addEventListener("click",function(e) {
this.innerHTML = this.id;
},false);
}
},false);
</script>
</body>

最佳答案

因为在循环的每次迭代中,当您执行 wrapper.innerHTML += ... 时,您将完全破坏 wrapper 内的所有节点。

我并不喜欢将 .innerHTML 作为 DOM 操作的一种方式,但如果您必须这样做,请改用 .insertAdjacentHTML()

window.addEventListener("load",function(e) {
var wrapper = document.getElementById("wrapper");
for(i=1;i<5;i++) {
wrapper.insertAdjacentHTML("beforeend", "<p><textarea id='text" + i + "'></textarea></p>");
var text = document.getElementById("text" + i);
text.addEventListener("click",function(e) {
this.innerHTML = this.id;
},false);
}
},false);

这将插入从您在 “beforeend” 位置提供的 HTML 解析的新节点,而不是每次都销毁和重建内容。


更好的方法是使用 DOM 创建方法。

window.addEventListener("load",function(e) {
var wrapper = document.getElementById("wrapper");
for(i=1;i<5;i++) {
var text = wrapper.appendChild(document.createElement("p"))
.appendChild(document.createElement("textarea"));
text.id="text" + i;
text.addEventListener("click",function(e) {
this.innerHTML = this.id;
},false);
}
},false);

关于javascript - 动态生成的元素不捕获事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17644039/

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