jQuery 事件處理：動態載入元素的 .live() 與 .on()？

動態HTML 的事件處理：jQuery .live() 與.on()

使用動態載入的HTML 時，新增事件處理程式新建立的元素可能具有挑戰性。這個問題探討了 jQuery 的 .live() 和 .on() 方法之間的差異，用於將點擊事件附加到動態載入的元素。

在 jQuery v1.7.1 中，.live() 已被棄用。相反，建議使用 .on() 來處理動態建立的內容的事件。然而提問者遇到了一個情況，.on() 無法為使用 $('#parent').load() 動態載入的元素註冊點擊事件。

這種場景的正確方法是事件委託，使用 .on() 實作。事件委託涉及將事件處理程序附加到載入動態內容之前存在的父元素。然後，事件處理程序被配置為偵聽源自動態建立的元素的事件。

例如，將點擊處理程序附加到動態載入到#parent 中的#child 元素：

$('#parent').on("click", "#child", function() {});

此方法允許事件處理程序擷取#child 元素上的點擊事件，即使在附加事件處理程序時這些元素不存在。這是因為按一下事件向上冒泡到 #parent 元素，該元素為 #child 元素定義了事件處理程序。

事件委託解決了在動態建立的元素中新增點擊處理程序的問題，並且是建議的方法使用動態載入的 HTML。

以上是jQuery 事件處理：動態載入元素的 .live() 與 .on()？的詳細內容。更多資訊請關注PHP中文網其他相關文章！