Bagaimana untuk Memindahkan `live()` jQuery kepada `on()` dengan Betul untuk Elemen Ditambah Secara Dinamik?

Peralihan daripada live() kepada on() dalam jQuery: Penyahpepijatan Event Binding

kaedah live() jQuery menghadapi penamatan dalam versi 1.7, yang memerlukan suis kepada on( ). Semasa menggantikan live() dengan on() sepatutnya menghasilkan hasil yang serupa, dokumentasi on() menekankan bahawa pengendali acara hanya mengikat elemen yang dipilih pada masa ini pada halaman semasa pengikatan.

Asal Pelaksanaan (live()):

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

Penggantian (on()):

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

Percanggahan dengan live() berpunca daripada fakta bahawa on() hanya mengikat elemen sedia ada pada masa ini, tidak seperti mekanisme delegasi live() yang melampirkan acara pengendali kepada elemen ditambahkan secara dinamik pada DOM.

Penggunaan yang betul on() untuk Dinamik Elemen:

Untuk mengekalkan pengendalian acara bagi elemen yang ditambah secara dinamik dengan on(), pengendali acara mesti terikat dengan elemen induk yang wujud pada halaman pada masa pengikatan. Ini boleh dicapai dengan menggunakan:

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

Sebagai alternatif, delegasi acara boleh digunakan lebih dekat dalam hierarki elemen untuk meningkatkan kekhususan.

JQuery Documentation Hinweis:

Dokumentasi live() dengan jelas menyatakan bahawa menulis semula live() dari segi pengganti melibatkan pengendali acara yang mengikat kepada elemen sedia ada:

$(document).on(events, selector, data, handler);  // jQuery 1.7+

Atas ialah kandungan terperinci Bagaimana untuk Memindahkan `live()` jQuery kepada `on()` dengan Betul untuk Elemen Ditambah Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!