Menyelesaikan Pengikatan Elemen Dinamik dalam Fancybox
Fancybox ialah perpustakaan JavaScript popular yang digunakan untuk mencipta tetingkap modal. Walau bagaimanapun, apabila elemen ditambahkan secara dinamik pada halaman, Fancybox sering gagal untuk mengikatnya. Ini boleh menjadi isu yang mengecewakan pembangun.
Untuk menangani isu ini, langkah berikut boleh diambil:
-
Gunakan jQuery v1.7.x atau Kemudian: jQuery versi 1.7.x dan ke atas termasuk penambahbaikan yang meningkatkan pengendalian elemen ditambah secara dinamik.
-
Gunakan Kaedah on() jQuery: Gunakan kaedah on() jQuery dengan acara fokus untuk mengikat Fancybox kepada elemen dinamik. Sebagai contoh, jika elemen yang ditambah secara dinamik mempunyai kelas "ajaxFancyBox", kod berikut akan mengikat Fancybox kepada mereka:
$("#container").on("focusin", function() {
$("a.ajaxFancyBox").fancybox({
// Fancybox options go here
});
});
Salin selepas log masuk
-
Konfigurasikan Pilihan Fancybox: Dalam kaedah $.fancybox(), anda boleh mengkonfigurasi pelbagai pilihan Fancybox, seperti padding, lebar, ketinggian dan jenis kandungan untuk dipaparkan.
-
Kendalikan Jenis Kandungan Berbeza: Anda boleh mengendalikan jenis kandungan yang berbeza dengan mencipta contoh Fancybox yang berasingan untuk setiap jenis. Sebagai contoh, satu contoh boleh mengendalikan imej, manakala satu lagi mengendalikan kandungan sebaris.
-
Tambahkan Atribut tabindex untuk Chrome: Untuk memastikan kefungsian yang betul dalam Chrome, tambahkan atribut tabindex="1" pada semua elemen yang akan diikat ke Fancybox.
Dengan mengikut langkah ini, elemen yang ditambah secara dinamik boleh berjaya diikat ke Fancybox, membenarkan tetingkap modal dibuka seperti yang diharapkan.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengikat Fancybox kepada Elemen Ditambah Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!