如何使用 Fancybox 動態新增元素？

將Fancybox 綁定到動態添加的元素

將Fancybox v1.3.4 與動態添加到文檔的元素一起使用時可能會遇到問題。這是因為 Fancybox 只綁定到靜態元素。

解決方案：

第1 步：升級到jQuery v1.7.x

此版本包含.on () 方法，可讓您將事件綁定到動態新增的元素。

第 2 步：使用 .on() 和焦點事件

將 .on() 方法綁定到 fancybox 元素的父元素上。 focusin 事件用於確保 Fancybox 只綁定到父容器焦點內的元素。

例如，如果您的Fancybox 元素具有類別「ajaxFancyBox」且位於id 為「container」的容器內":

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

此方法也支援為不同類型的內容指定不同的Fancybox 選項：

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

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

Chrome 重要注意事項：

在Chrome 中，為使on() 方法正常運作，必須向綁定到Fancybox 的所有元素都新增tabindex 屬性：

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

此解決方案適用於附加新內容和取代現有內容。

以上是如何使用 Fancybox 動態新增元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！