主页 / 问题 / 1595110
Accepted
ZxNuClear
Asked:2024-09-28 17:42:20 +0000 UTC2024-09-28 17:42:20 +0000 UTC

为创建的元素添加事件监听器

  • 772

大家下午好。我试图弄清楚当您单击正在创建的块的每三个元素时如何调用模态窗口，问题是第一次单击被“忽略”，并且只有再次单击第三个元素后模态才会打开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只是表面上的熟悉，所以我不排除我自己在代码中犯的平庸错误

javascript

1 个回答

  1. Best Answer

    在您的情况下，您已经使用了委托

    info.addEventListener('click', (e) => {
  const target = e.target.closest('[data-del]');
  if (!target) return;
  // ...
})

    ...也就是说，当块内有单击时，您可以检查它是否是带有 的元素内的单击[data-del]。因此，您不需要向该元素添加点击侦听器。

    完成后的代码将是这样的：

    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;
  
  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>

    • 1

相关问题