如何将Fancybox绑定到动态添加的元素上？

解决 Fancybox 中的动态元素绑定

Fancybox 是一个流行的 JavaScript 库，用于创建模态窗口。然而，当元素动态添加到页面时，Fancybox常常无法绑定到它们。对于开发人员来说，这可能是一个令人沮丧的问题。

要解决此问题，可以采取以下步骤：

1. 使用 jQuery v1.7.x 或更高版本： jQuery 版本 1.7.x 及更高版本包含改进动态添加元素处理的增强功能。
2. 使用 jQuery 的 on() 方法： 将 jQuery 的 on() 方法与 focusin 事件结合使用将 Fancybox 绑定到动态元素。例如，如果动态添加的元素具有“ajaxFancyBox”类，则以下代码会将 Fancybox 绑定到它们：

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

3. 配置 Fancybox 选项： 内通过 $.fancybox() 方法，你可以配置 Fancybox 的各种选项，例如内边距、宽度、高度以及要显示的内容类型。
4. 处理不同的内容类型：你可以通过为每种类型创建单独的 Fancybox 实例来处理不同类型的内容。例如，一个实例可以处理图像，而另一个实例可以处理内联内容。
5. 为 Chrome 添加 tabindex 属性： 为了确保 Chrome 中的正常功能，请将 tabindex="1" 属性添加到所有将要绑定到 Fancybox 的元素。

按照以下步骤，动态添加的元素就可以成功绑定到 Fancybox，让模态窗口按预期打开。

以上是如何将Fancybox绑定到动态添加的元素上？的详细内容。更多信息请关注PHP中文网其他相关文章！