为什么我的 JavaScript 事件侦听器不能处理动态创建的元素，如何使用事件委托来修复它？

JavaScript 中的动态事件处理

使用 Web 应用程序时，通常需要动态创建和操作页面上的元素。然而，将事件处理程序附加到动态创建的元素可能具有挑战性。

问题

在提供的代码片段中，动态创建了一个 HTML 按钮并将其插入到 DOM 中。然后，事件侦听器附加到该按钮，但单击按钮时不会触发事件处理程序。

事件委托

问题是事件侦听器在添加到 DOM 之前附加到按钮。当动态创建按钮时，它会稍后附加到 DOM，但事件侦听器调用已经发生。

对此的解决方案是事件委托。事件委托涉及将事件侦听器附加到父元素而不是直接附加到目标元素。当事件发生时，事件会在 DOM 树中向上传播，直到到达带有附加事件侦听器的父元素。

示例

document.addEventListener("click", function(e) {
  const target = e.target.closest("#btnPrepend"); // Or any other selector.

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

在此示例中，closest() 方法用于确定单击事件是否发生在#btnPrepend 元素或其后代元素内。如果是这样，目标变量将引用被单击的元素。

jQuery 替代方案

jQuery 使用 on() 方法简化事件委托。

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

结论

事件委托提供了一种可靠的方法用于将事件处理程序附加到动态创建的元素。通过将事件监听器附加到父元素，可以确保即使目标元素稍后添加到 DOM，事件处理程序也会被触发。

以上是为什么我的 JavaScript 事件侦听器不能处理动态创建的元素，如何使用事件委托来修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！