如何將Fancybox綁定到動態新增的元素？

解決 Fancybox 中的動態元素綁定

Fancybox 是一個流行的 JavaScript 函式庫，用於建立模態視窗。然而，當元素動態添加到頁面時，Fancybox常常無法綁定到它們。對於開發人員來說，這可能是一個令人沮喪的問題。

要解決此問題，可以採取以下步驟：

1. 使用jQuery v1.7.x 或更高版本： jQuery 版本1.7.x 及更高版本包含改進動態添加處理的增強功能elements.
2. 使用jQuery 的on() 方法： 使用jQuery 的on() 方法和focusin 事件將Fancybox 綁定到動態元素。例如，如果動態新增的元素具有「ajaxFancyBox」類，以下程式碼會將Fancybox 綁定到它們：

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

3. 配置Fancybox 選項： 內裝$.fancybox() 方法，可以設定Fancybox 的各種選項，例如padding、width、height 以及內容的類型
4. 處理不同的內容類型：您可以透過為每種類型建立單獨的Fancybox 實例來處理不同類型的內容。例如，一個實例可以處理影像，而另一個實例可以處理內聯內容。
5. 為 Chrome 新增 tabindex 屬性： 為了確保 Chrome 中的正常功能，請將 tabindex="1" 屬性新增至所有將要綁定到 Fancybox 的元素。

透過以下步驟，可以成功將動態新增的元素綁定到 Fancybox，從而實現模態視窗如預期開啟。

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