事件侦听器不'；t触发器在JavaScript上动态创建的元素_Javascript_Html

事件侦听器不'；t触发器在JavaScript上动态创建的元素

javascript html

事件侦听器不'；t触发器在JavaScript上动态创建的元素,javascript,html,Javascript,Html,我无法触发动态创建的按钮。只有手动创建元素时，事件侦听器才能正常工作 <!DOCTYPE html> <html> <body> <button id="create">Create new button</button> <div id="mydiv"></div> <script> document.getElementById("create").addEventListener('click

我无法触发动态创建的按钮。只有手动创建元素时，事件侦听器才能正常工作

<!DOCTYPE html>
<html>
<body>
<button id="create">Create new button</button>
<div id="mydiv"></div>

<script>
document.getElementById("create").addEventListener('click', (x) => {
document.getElementById("mydiv").innerHTML = "<button id='show'>Show alert</button>";});

document.getElementById('show').addEventListener('click', (b) => {
alert("It works");});
</script>
</body>
</html>


创建新按钮
document.getElementById（“创建”）.addEventListener（'click'，（x）=>{
document.getElementById（“mydiv”）.innerHTML=“显示警报”；}）；
document.getElementById（'show'）。addEventListener（'click'，（b）=>{
警报（“它工作”）；}）；

//通过活动授权进行整理：

<!DOCTYPE html>
<html>
<body>
<button id="create">Create new button</button>
<div id="mydiv"></div>

<script>
document.getElementById("create").addEventListener('click', (x) => {
    document.getElementById("mydiv").innerHTML = "<button class='show'>Show alert</button>";
});
const parent = document.getElementById('mydiv');
parent.addEventListener('click', (b) => {
if (x.target.className === 'show') {alert("It works")}
;});
</script>
</body>
</html>


创建新按钮
document.getElementById（“创建”）.addEventListener（'click'，（x）=>{
document.getElementById（“mydiv”）.innerHTML=“显示警报”；
});
const parent=document.getElementById（'mydiv'）；
parent.addEventListener（'click'，（b）=>{
如果（x.target.className=='show'）{alert（“它工作”）}
;});

必须将绑定新元素的代码移动到创建新元素的代码的事件处理程序中，因为当新元素的事件绑定在外部时，它会立即失败，因为该元素不存在

换句话说，您必须等待元素存在，然后才能绑定它


创建新按钮
document.getElementById（“创建”）.addEventListener（'click'，（x）=>{
document.getElementById（“mydiv”）.innerHTML=“显示警报”；
//在创建新元素之前，此代码不会运行，因此它将
//在那一点上引用它是安全的。
document.getElementById（'show'）。addEventListener（'click'，（b）=>{
警惕（“它起作用”）；
});
});

试试这个：


创建新按钮
document.getElementById（“创建”）.addEventListener（'click'，（x）=>{
document.getElementById（“mydiv”）.innerHTML=“显示警报”；}）；
document.addEventListener（'click'，函数（e）{
如果（e.target&&e.target.id=='show'）{
警惕（“它起作用”）；
}
});

您可能想尝试改用事件委派？我想创建一个网页网站，其中包含许多不同的容器，这些容器将刷新、消失或由事件侦听器触发。谢谢，事件委派工作正常。