大家下午好。我试图弄清楚当您单击正在创建的块的每三个元素时如何调用模态窗口,问题是第一次单击被“忽略”,并且只有再次单击第三个元素后模态才会打开span。我猜addEventListener它不知道“提前”创建的块的存在,因此第一次单击被忽略并且模式不会打开。有办法解决这个问题吗?
const btn = document.querySelector("#btn");
const modal = document.querySelector("#modal");
const info = document.querySelector(".info");
btn.addEventListener('click', () => {
info.innerHTML += `<div><span>1</span><span>2</span><span data-del>3</span></div>`
})
info.addEventListener('click', (e) => {
const target = e.target.closest('[data-del]');
if (!target) return;
target.addEventListener("click", () => {
modal.showModal();
});
})
div {
width: 100%;
height: 30px;
}
span {
display: inline-block;
width: 50px;
background-color: aqua;
margin: 5px;
text-align: center;
}
.info {
width: 300px;
}
<button id="btn">Добавить строку</button>
<div class="info"></div>
<dialog id="modal">
<p>Модальное окно</p>
</dialog>
ps我对JS只是表面上的熟悉,所以我不排除我自己在代码中犯的平庸错误
