如何將事件偵聽器附加到 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中文網其他相關文章！