当我尝试为创建的 DOM 元素设置事件侦听器，并将它们添加到元素列表中时，事件侦听器仍然存在于 JS 中，但是当我将它们添加到在 HTML 中创建的静态 DOM 元素时，它们就会消失。我将 Flask 与 Jinja、外部 JS 文件和 HTML 模板一起使用
external.js
function load() {
let source_system = document.getElementById("source-system");
let level_container = document.createElement("DIV")
for(let node of level){
let button_select = document.createElement("BUTTON")
button_select.textContent = "SELECT"
button_select.onclick = () => console.log("Hello")
level_container.appendChild(button_select)
}
source_system.appendChild(level_container)
}
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Details</title>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/page.css') }}">
</head>
<body>
<div id="main">
<div id="source-system"></div>
</div>
<script type="text/javascript" src="{{ url_for('static', filename='javascript/external.js') }}"></script>
<script>
const level = {{ level | safe }}
load()
</script>
</body>
</html>
一切正常，按钮正在显示，但它们没有任何事件侦听器，感谢您的帮助
我尝试在 script 部分
的 HTML 文件中以相同的方式创建按钮<script>
let source_system = document.getElementById("source-system");
let button_select = document.createElement("BUTTON")
button_select.textContent = "SELECT"
button_select.onclick = () => console.log("Hello")
source_system.appendChild(button_select)
</script>
通过标签名称查找元素并在外部文件中添加事件监听器
let buttons = document.getElementsByTagName('BUTTON')
for (let button of buttons){
button.onclick = () => console.log("hello")
}
并且有效
我想在外部文件中创建元素时执行此操作