如何使用 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>

此解决方案适用于附加新内容和替换现有内容。确保在应用 .on() 方法的容器中添加新内容。

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