Bagaimana untuk Melaksanakan Datepickers pada Elemen Dinamik dengan jQuery?

Melaksanakan jQuery datepicker() pada Elemen Dicipta Secara Dinamik

Banyak aplikasi web memerlukan penggunaan elemen dinamik, seperti kotak teks, yang boleh ditambah atau dialih keluar mengikut keperluan. Apabila menambah pemilih tarikh pada elemen dinamik ini, adalah penting untuk memahami cara mengendalikan situasi ini dengan berkesan.

Cabaran: Pelaksanaan datepicker() yang tidak berkesan

Andaikan kami telah mencipta berbilang kotak teks secara dinamik, setiap satu dengan kelas biasa "datepicker_recurring_start." Matlamatnya adalah untuk membolehkan setiap kotak teks memaparkan kalendar apabila diklik. Walau bagaimanapun, menggunakan kod berikut hanya menggunakan fungsi pemilih tarikh pada kotak teks pertama:

$(".datepicker_recurring_start" ).datepicker();

Penyelesaian: Delegasi Acara yang Diwakilkan

Untuk menangani isu ini, kami memanfaatkan kuasa perwakilan acara, yang membolehkan kami melampirkan pengendali acara pada elemen induk statik, seperti badan dokumen. Kod berikut menunjukkan pendekatan ini:

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

Dalam kod ini:

• $('body') memilih badan dokumen sebagai elemen induk statik.
• on('focus': Mendaftarkan pendengar acara untuk acara 'focus'.
• ".datepicker_recurring_start": Menentukan bahawa pendengar acara harus digunakan pada keturunan badan yang mempunyai kelas "datepicker_recurring_start."
• function() {...}: Mentakrifkan pengendali acara yang memulakan tika datepicker untuk elemen semasa.

Teknik ini secara berkesan melampirkan fungsi datepicker kepada semua semasa dan akan datang elemen dengan kelas "datepicker_recurring_start", memastikan semua kotak teks yang dibuat secara dinamik mempunyai gelagat yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Datepickers pada Elemen Dinamik dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!