如何将事件侦听器附加到 JavaScript 中动态创建的元素？

将事件附加到 JavaScript 中动态创建的元素

当尝试动态添加 HTML 元素并为其分配事件侦听器时，可能会遇到事件不触发的问题。这是因为事件监听器是在动态元素添加到 DOM 之前附加的。

要解决此问题，一种解决方案是使用 事件委托。这涉及在更高级别的元素上注册事件侦听器，该元素将处理所有子元素上的点击。这允许动态添加的元素触发事件，即使它们在附加事件侦听器时不存在。

代码示例

考虑以下代码：

document.addEventListener("click", function(e) {
  const target = e.target.closest("#btnPrepend");

  if (target) {
    // Do something with `target`.
  }
});

在此代码中，我们向文档对象添加了一个事件侦听器，它将侦听任何元素上的点击。当发生点击时，我们使用closest()方法来检查点击的目标是否是ID为“btnPrepend”的子元素。如果是，我们可以在按钮上执行我们想要的操作。

这种方法之所以有效，是因为事件被委托给文档对象，该对象在添加任何动态元素之前就存在。通过检查事件处理程序中是否存在“btnPrepend”元素，我们确保事件仅在按钮存在时触发。

使用 jQuery

jQuery 通过 on() 方法简化了事件委托：

$(document).on("click", "#btnPrepend", function() {
  // Do something with `$(this)`.
});

这里，我们委托了点击事件到文档对象并指定我们要处理的按钮的选择器。这允许更简洁和可读的代码。

结论

在使用动态创建的元素时请记住考虑事件委托。它提供了一种强大的方法来处理事件，确保即使在附加事件侦听器后添加与它们关联的元素时，它们也能正确触发。

以上是如何将事件侦听器附加到 JavaScript 中动态创建的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！