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

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

尝试将动态元素附加到动态创建的列表并向动态创建的列表添加事件侦听器时动态创建的元素，事件可能不会触发。这是因为在附加事件侦听器时元素不可用。

要解决此问题，可以采用事件委托。此技术涉及将事件侦听器附加到包含动态创建的元素的更高级别元素。

例如，考虑以下代码：

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

  if (target) {
    // Do something with 'target'
  }
});

在此示例中，事件侦听器是附加到文档对象，侦听单击事件。 Closest() 函数用于确定单击事件是否源自具有选择器 #btnPrepend（或任何其他定义的选择器）的元素。如果找到匹配，则相应地处理事件。

或者，jQuery 提供了一种简化的事件委托方法：

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

此方法将事件监听器附加到文档对象，监听对于带有选择器 #btnPrepend 的元素上的点击事件。

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