Penangan peristiwa jQuery .on() tidak berfungsi
Saya ingin melampirkan event ke kelas elemen yang dibuat secara dinamis, jadi saya menggunakan fungsi live tetapi tidak terpicu. Jadi periksa referensi fungsi langsung, di sana saya beri warna merah di bawah catatan
Pada jQuery 1.7, metode .live() sudah tidak digunakan lagi. Gunakan .on() untuk melampirkan penangan peristiwa. Pengguna versi jQuery yang lebih lama harus menggunakan .delegate() sebagai pengganti .live().
Jadi putuskan untuk menggunakan fungsi on, Tapi masih belum berhasil. bidang teks sudah terpasang dengan jquery ui datpicker. di elemen lain pilih saya menonaktifkan bidang itu.
jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');setelah dinonaktifkan jika saya klik saya ingin menampilkan peringatan atau tooltip. jadi saya mencoba ini, tetapi tidak berhasil
jQuery(".date_picker_disabled").on("click", function(event){
alert('hi');
});Apa yang mungkin menjadi masalah
Saya menggunakan jquery 1.7.1 (jquery-1.7.1.min.js)
Masalahnya adalah `jQuery(".date_picker_disabled") menemukan elemen dengan kelas tersebut dan mengikatnya. Jika elemen tidak memiliki kelas tersebut pada saat pengikatan dilakukan, peristiwa tidak akan ditangani.
Fungsi on memungkinkan Anda untuk mengatasi hal ini dengan menanganinya pada elemen lain ketika event "menggelembung ke " elemen induk. Dalam hal ini, kita dapat mengatakan elemen badan - mungkin ada induk yang lebih spesifik yang dapat Anda pilih.
jQuery(document.body).on('click', '.date_picker_disabled', function(event) {
alert('hi');
});Penangan peristiwa sekarang terikat pada elemen document.body. Semua klik yang terjadi di mana saja di dalam body akan diuji untuk melihat apakah berasal dari elemen yang cocok dengan pemilih. Jika ya, penanganannya akan dijalankan.
Hal ini dijelaskan pada dokumentasi untuk fungsi on. Ini adalah perilaku yang sama seperti yang ada pada versi jQuery sebelumnya dengan fungsi live dan delegate.
Setelah melihat kembali kode Anda, Anda memiliki disabled="disabled" yang disetel pada elemen input. Peristiwa klik tidak dijalankan pada elemen yang dinonaktifkan.
Hal ini cukup rumit.
Ketika kode Anda berjalan, elemen Anda tidak memiliki kelas .date_picker_disabled sehingga jQuery(".date_picker_disabled") Anda tidak menghasilkan apa pun dan .on() tidak dipanggil.
Terapkan .on() pada elemen luar dan gunakan parameter pemilih:
// you can also do $(document).on()
$(<outer element>).on('click', '.date_picker_disabled', function() {
// do something
});Ini akan mendelegasikan kejadian ke <elemen luar>. Handler hanya akan dieksekusi jika elemen dengan kelas .date_picker_disabled telah diklik (parameter kedua).
Dari dokumentasi .live():
Penulisan ulang metode .live() dalam hal penerusnya adalah langsung; ini adalah template untuk panggilan yang setara untuk semua tiga metode pelekatan event:
$(selector).live(events, data, handler); // jQuery 1.3+ $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+
Jadi dalam kasus Anda, Anda akan melakukannya:
$(document).on('click', '.date_picker_disabled', function(event){
alert('hi');
});
