對於動態新增的元素，如何正確地將 jQuery 的`live()`遷移到`on()`？-js教程-PHP中文網

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

Linda Hamilton

發布： 2024-12-16 05:22:10

原創

728 人瀏覽過

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中文網其他相關文章！