首頁 >web前端 >js教程 >對於動態新增的元素,如何正確地將 jQuery 的`live()`遷移到`on()`?

對於動態新增的元素,如何正確地將 jQuery 的`live()`遷移到`on()`?

Linda Hamilton
Linda Hamilton原創
2024-12-16 05:22:10736瀏覽

How to Correctly Migrate jQuery's `live()` to `on()` for Dynamically Added Elements?

在jQuery 中從live() 轉換到on():調試事件綁定

jQuery 的live() 方法在1.7 版本中面臨棄用,需要切換到on( )。雖然用 on() 取代 live() 理想情況下應該會產生類似的結果,但 on() 文件強調事件處理程序僅綁定到綁定時頁面上目前選定的元素。

原始實作(live()):

$('select[name^="income_type_"]').live('change', function() {
    alert($(this).val());
});

替換(on()):

$('select[name^="income_type_"]').on('change', function() {
    alert($(this).val());
});

與live() 的差異源自於on() 只綁定目前存在的元素,而不像live()附加事件的委託機制動態加入到 DOM 的元素的處理程序。

動態時正確使用on()元素:

要使用on() 維護動態新增元素的事件處理,事件處理程序必須綁定到綁定時頁面上存在的父元素。這可以透過使用來實現:
$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

或者,可以在元素層次結構中更緊密地應用事件委託以提高特異性。

jQuery 文件說明:

live() 文件明確指出,根據其後繼者重寫live() 涉及將事件處理程序綁定到現有的元素:
$(document).on(events, selector, data, handler);  // jQuery 1.7+

以上是對於動態新增的元素,如何正確地將 jQuery 的`live()`遷移到`on()`?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn