Bagaimana untuk Menggunakan Fancybox dengan Elemen Ditambah Secara Dinamik?

Mengikat Fancybox kepada Elemen Ditambah Secara Dinamik

Anda boleh menghadapi isu menggunakan Fancybox v1.3.4 dengan elemen yang ditambahkan secara dinamik pada dokumen. Ini kerana Fancybox mengikat kepada elemen statik sahaja.

Penyelesaian:

Langkah 1: Naik taraf kepada jQuery v1.7.x

Versi ini termasuk kaedah .on() yang membolehkan anda mengikat acara untuk ditambahkan secara dinamik elemen.

Langkah 2: Gunakan .on() dan acara focusin

Ikat kaedah .on() kepada elemen induk elemen kotak fancy anda. Acara focusin digunakan untuk memastikan Fancybox hanya mengikat elemen dalam fokus bekas induk.

Contohnya, jika elemen Fancybox anda mempunyai kelas "ajaxFancyBox" dan berada dalam bekas dengan id "container ":

$("#container").on("focusin", function() {
  $("a.ajaxFancyBox").fancybox({
    // Set your Fancybox options here
  });
});

Kaedah ini juga menyokong menentukan pilihan Fancybox berbeza untuk jenis kandungan:

$("#container").on("focusin", function() {
  $("a.ajaxFancyBox").fancybox({
    // Ajax options
  });

  $("a.iframeFancyBox").fancybox({
    // Iframe options
  });
});

Nota Penting untuk Chrome:

Dalam Chrome, menambahkan atribut tabindex pada semua elemen yang terikat pada Fancybox adalah perlu untuk menjadikan kaedah on() berfungsi :

<a tabindex="1" class="ajaxFancyBox" href="image01.jpg">...</a>
<a tabindex="1" class="ajaxFancyBox" href="image02.jpg">...</a>

Penyelesaian ini berfungsi untuk menambahkan kandungan baharu dan menggantikan kandungan sedia ada. Pastikan kandungan baharu ditambahkan dalam bekas yang menggunakan kaedah .on().

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Fancybox dengan Elemen Ditambah Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!