首頁 > web前端 > js教程 > 如何在 jQuery 中將 Onclick 事件綁定到動態插入的 HTML 元素?

如何在 jQuery 中將 Onclick 事件綁定到動態插入的 HTML 元素?

Barbara Streisand
發布: 2024-11-13 03:14:02
原創
486 人瀏覽過

How to Bind Onclick Events to Dynamically Inserted HTML Elements in jQuery?

jQuery:將Onclick 事件綁定到動態插入的HTML 元素

在jQuery 中,可以將事件處理程序綁定到到的元素頁面載入後的DOM。但是,早期使用的一些方法,例如 .bind() 和 .live() 已被棄用。本文介紹如何使用更新的 .on() 方法將 onclick 事件正確綁定到動態新增的元素。

提供的程式碼示範如何使用 jQuery 的 .append() 方法動態新增連結元素。此元素包含使用 .bind() 方法綁定的 onclick 事件偵聽器。但是,單擊連結時不會觸發事件偵聽器。

要解決此問題,請使用 .on() 方法而不是 .bind()。 .on() 是一種更新的方法,用於事件委託,並允許將事件處理程序綁定到事件處理時 DOM 中不存在的元素。

綁定事件的正確程式碼動態新增元素的onclick 事件是:

$(document).on('click', 'selector-to-your-element', function() {
    // Code here ...
});
登入後複製

在此程式碼片段中,selector-to-your-element 表示標識要綁定事件的動態新增元素的選擇器。當點擊與此選擇器相符的任何元素時,將執行事件處理程序內的程式碼。

透過以這種方式使用 .on(),可以確保 onclick 事件正確綁定到新增到 DOM 的元素動態地。

以上是如何在 jQuery 中將 Onclick 事件綁定到動態插入的 HTML 元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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