為什麼我的 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中文網其他相關文章！