我在触发动态创建的按钮时遇到问题。仅当元素是手动创建时，事件监听器才能正常工作。
<!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>
//用事件委托(delegate)整理出来:
<!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>
最佳答案
您必须将绑定(bind)新元素的代码移动到创建它的代码的事件处理程序中，因为当新元素的事件绑定(bind)位于外部时，它会立即失败，因为该元素不存在。
换句话说，你必须等待元素存在才能绑定(bind)它。
<!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>";
// This code won't be run until after the new element is created, so it will
// be safe to reference it at that point.
document.getElementById('show').addEventListener('click', (b) => {
alert("It works");
});
});
</script>
</body>
</html>关于javascript - 事件监听器不会触发 JavaScript 上动态创建的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59535598/