[英]Cannot add javascript eventListener to recently created element
我使用 Javascript 创建了 625 个<div class="box"><div>然后我想为每个框添加事件侦听器。 盒子已成功创建，但侦听器不工作。 这是我的完整代码，我非常感谢您的所有回复。 谢谢
<!DOCTYPE html>
<html>
<head>
<title>Number AI | Machine Learning Technologhy</title>
<style>
.box-container{
display: grid;
width: 300px;
height: 300px;
border: 1px solid blue;
grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}
.box{
width:10px;
height:10px;
border: 1px solid black;
text-align: center;
}
</style>
<script type="text/javascript">
function initiateBox(){
for (let i = 0; i < 625; i++) {
let box = document.createElement("DIV");
box.classList.add("box");
document.querySelector('.box-container').appendChild(box);
}
};
window.onload = initiateBox;
</script>
</head>
<body>
<h2>Number AI</h2>
<div class="box-container"></div>
<script>
document.querySelectorAll(".box").forEach(box =>{
box.addEventListener("mouseover",function(){
box.style.backgroundColor = 'black';
});
});
</script>
</body>
</html>
几件事
无论如何，这是委托脚本
function initiateBox() { const container = document.querySelector('.box-container'); for (let i = 0; i < 625; i++) { let box = document.createElement("div"); box.classList.add("box"); container.appendChild(box); } container.addEventListener("mouseover", function(e) { const tgt = e.target; if (tgt.classList.contains("box")) tgt.style.backgroundColor = 'black'; }); }; window.addEventListener("load",initiateBox)
.box-container { display: grid; width: 300px; height: 300px; border: 1px solid blue; grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .box { width: 10px; height: 10px; border: 1px solid black; text-align: center; }
<title>Number AI | Machine Learning Technologhy</title> <h2>Number AI</h2> <div class="box-container"> </div>
好吧，你在这里有几个选择。 但最简单的（不是高效的）是在创建框时添加事件侦听器，如下所示：
<!DOCTYPE html> <html> <head> <title>Number AI | Machine Learning Technologhy</title> <style> .box-container { display: grid; width: 300px; height: 300px; border: 1px solid blue; grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .box { width: 10px; height: 10px; border: 1px solid black; text-align: center; } </style> <script type="text/javascript"> function initiateBox() { for (let i = 0; i < 625; i++) { let box = document.createElement("DIV"); box.classList.add("box"); box.addEventListener("mouseover", function() { box.style.backgroundColor = 'black'; }); document.querySelector('.box-container').appendChild(box); } }; window.onload = initiateBox; </script> </head> <body> <h2>Number AI</h2> <div class="box-container"></div> </body> </html>
但无论如何，如果您正在寻找一种有效的方法来做到这一点，正如@mplungjan 在评论中指出的那样，最好使用这样的委托方法：
<!DOCTYPE html> <html> <head> <title>Number AI | Machine Learning Technologhy</title> <style> .box-container { display: grid; width: 300px; height: 300px; border: 1px solid blue; grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .box { width: 10px; height: 10px; border: 1px solid black; text-align: center; } </style> <script type="text/javascript"> function initiateBox() { const boxContainer = document.querySelector('.box-container'); for (let i = 0; i < 625; i++) { let box = document.createElement("DIV"); box.classList.add("box"); boxContainer.appendChild(box); } boxContainer.addEventListener("mouseover", function(event) { const target = event.target; if (target.classList.contains('box')) target.style.backgroundColor = 'black'; }); }; window.onload = initiateBox; </script> </head> <body> <h2>Number AI</h2> <div class="box-container"></div> </body> </html>
我认为第二个脚本是在将框元素附加到文档之前运行的，因此找不到任何框。 您可以将 eventListener 添加到您创建的启动框函数中，如下所示：
function initiateBox(){
for (let i = 0; i < 625; i++) {
let box = document.createElement("DIV");
box.classList.add("box");
box.addEventListener("mouseover",function(){
box.style.backgroundColor = 'black';
});
document.querySelector('.box-container').appendChild(box);
}
};
window.onload = initiateBox;
如果背景颜色实际上是您要在 mouseOver 上更改的属性，我建议使用 CSS 悬停来实现。
为由JavaScript代码创建的元素添加eventlistener
[英]Add eventlistener for element that was created by javascript code
无法通过JavaScript创建的div将eventListener添加到
[英]Unable to add an eventListener to a through JavaScript created div
无法将 javascript 中的 eventListener 添加到 css 创建的箭头
[英]Unable to add eventListener in javascript to the arrow created by css
添加和删除带有参数和访问元素和事件的事件侦听器？ - Javascript
[英]Add AND remove eventlistener with arguments and access element and event? - Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.