首頁 > web前端 > js教程 > 如何將事件偵聽器附加到 JavaScript 中動態建立的元素?

如何將事件偵聽器附加到 JavaScript 中動態建立的元素?

DDD
發布: 2024-12-20 06:32:09
原創
321 人瀏覽過

How to Attach Event Listeners to Dynamically Created Elements in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板