如何使用 jQuery 將 Onclick 事件綁定到動態新增的 HTML 元素

使用 jQuery 時，經常需要動態新增 HTML 元素頁面。在這種情況下，您可能需要將事件處理程序附加到這些元素。然而，將事件處理程序附加到頁面載入後新增的元素可能具有挑戰性。

問題和先前的解決方案

傳統上，可以使用 .bind() 方法將事件處理程序附加到動態添加的元素。但是，此方法已被棄用，取而代之的是 .on() 方法。

使用.on() 的正確解決方案

將onclick 事件正確綁定到使用jQuery 動態添加的元素，您應該使用.on() 方法，如下圖所示：

$(document).on('click', '.my-element', function() {
  // Your event handling code goes here
});

在此範例中，.on() 方法用於將事件處理程序附加到文檔，指定「click」事件和「.my-element」選擇器。這可確保任何具有「my-element」類別的元素都會觸發事件處理程序，無論何時新增至頁面。

用法範例

這裡是.on() 方法的範例實作：

在此範例中，.on() 方法用於將事件處理程序附加到#container div 中具有「my-element」類別的任何元素。當點擊任何此類元素時，都會觸發警報訊息。