使用jQuery 進行動態事件綁定：解決「onclick」問題

在前端開發領域，動態新增事件是很常見的頁面的HTML 元素。然而，將事件綁定到這些新新增的元素可能會很棘手，因為傳統的事件綁定方法可能無法如預期運作。

問題：即時事件與委託事件

在處理動態新增的元素時，即時事件綁定（bind()、live() 和delegate() 等方法）通常是首選解決方案。然而，由於效能問題，這些方法在 jQuery 中已被棄用。

相反，應使用委託事件綁定，其中事件綁定到靜態元素（通常是文檔對象），並根據

解決方案：使用on() 方法

將onclick 事件綁定到動態新增的元素，使用委託事件綁定，應使用jQuery on() 方法。此方法採用三個參數：

1. 事件類型（例如，「單擊」）
2. 針對將事件附加到的元素的選擇器
3. 事件處理程式函數

範例：

$(document).on('click', '.my-dynamic-element', function() {
  // Code to execute when the element is clicked
});

綁定多個動態添加的元素

動態新增多個元素時，建議在on(中使用公共的類別或屬性作為選擇器） 方法。這可確保具有指定選擇器的所有元素一致處理。

已棄用的方法

以下方法已棄用，不應再用於事件綁定：

• bind()
• live()
• delegate()

如上所述使用on()方法確保與現代版本的 jQuery 相容，並為動態添加的元素提供高效的事件處理。