Migrasi jQuery: Mengapa `on()` Tidak Berfungsi Dengan Dropdown Ditambah Secara Dinamik?

jQuery: Menaik taraf daripada live() kepada on() untuk Dropdown Ditambah Secara Dinamik

jQuery 1.7 memperkenalkan kaedah on() sebagai pengganti untuk hidup(). Walaupun sintaks dan kefungsian yang dimaksudkan on() kelihatan mudah, pengguna mungkin menghadapi masalah apabila cuba berhijrah daripada live() ke on() untuk elemen ditambah secara dinamik.

Masalah:

Apabila menggunakan on() untuk mendengar acara change() pada menu lungsur yang ditambah secara dinamik, pengendali acara gagal untuk kebakaran.

Punca:

Tidak seperti live(), yang melampirkan pengendali acara pada semua elemen padanan dalam dokumen, on() hanya mengikat pengendali kepada elemen sedia ada. Ini kerana pengendali acara on() terhad kepada elemen yang dipilih pada masa ini, yang bermaksud elemen yang baru ditambah tidak akan dapat mencetuskan acara melainkan pengendali terikat kepada elemen peringkat lebih tinggi.

Penyelesaian:

Untuk meniru gelagat live(), ikat pengendali acara kepada elemen peringkat lebih tinggi yang merangkum secara dinamik tambah dropdown. Ini memastikan bahawa semua elemen yang baru ditambah dalam skop itu akan dapat mencetuskan pengendali acara.

Kod:

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

Sebagai alternatif, adalah amalan terbaik untuk mengikat pengendali acara sedekat mungkin dengan elemen sasaran. Walau bagaimanapun, ini mungkin tidak selalunya boleh dilaksanakan dalam semua senario.

Nota:

Adalah penting untuk mengetahui bahawa dokumentasi on() menyatakan dengan jelas bahawa pengendali acara hanya terikat pada elemen yang dipilih pada masa ini dan mesti wujud pada halaman pada masa pengikatan.

Atas ialah kandungan terperinci Migrasi jQuery: Mengapa `on()` Tidak Berfungsi Dengan Dropdown Ditambah Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!