改变 DOM 后 jQuery FancyBox 不工作

Question

我们使用 Fancybox 为我们的图片库提供灯箱。

我们有一个带有“images”类的 ul。每个列表项都包含一个锚标记和其中的图像。锚标记包含全尺寸图像的 href。

此代码用于设置灯箱。

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () {
        if (!themeJSEnabled) {
            $(".images a").fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'titlePosition': 'inside',
                'autoScale': true,
                'centerOnScroll': true,
                'overlayOpacity': .95,
                'titleFromAlt': true,
                'scrolling': 'no'
            });
        }
    });
//]]>
</script>

这对于我们大多数自有品牌都适用，但某种特定的风格则行不通。

不起作用的样式使用javascript来分离部分DOM并重建它（如下）

 $("#subcontent2").before("<div class='combinedContentWrapper'></div>");
 $("div.combinedContentWrapper").append("<div class='combinedContent'></div>");
 $("div.combinedContent").append("<div class='sc1'></div>");
 $("div.combinedContent").append("<div class='mc'></div>");
 $("div.mc").append($(".maincontent").html());
 $("div.sc1").append($(".subcontent1").html());
 $("div.maincontent").remove();
 $("div.subcontent1").remove();
 $("div.mc").addClass("maincontent");
 $("div.sc1").addClass("subcontent1");

在这种样式的主题中，themeJSEnabled（从第一个代码块开始）是true，所以在使用上面的代码重建DOM之后，我使用以下代码来注册 Fancybox：

 $(".images a").fancybox({
      'transitionIn': 'elastic',
      'transitionOut': 'elastic',
      'titlePosition': 'inside',
      'autoScale': true,
      'centerOnScroll': true,
      'overlayOpacity': .95,
      'titleFromAlt': true,
      'scrolling': 'no'
  });

据我了解，这应该可以工作，因为在重建 DOM 之前我没有注册任何内容，并且 fancybox 应该在新元素上注册。

但是，当我第一次单击列表中的任何图像时，它会抛出一个 JavaScript 错误 -“t 未定义”。该错误被列为第 17 行，属于完全不相关的方法。即使该方法被 try/catch 块包围，该错误仍然会发生。后续单击图像时不会出现该错误，不会产生任何结果。

在这种情况下我该怎么做才能让 Fancybox 正常工作？

您可以通过此链接查看我们测试服务器上的实时示例。单击“图像”，然后单击图像。

Answer 1

好的，我们最终找到了原因。

当我们修改 DOM 时，它似乎丢失了对 fancybox javascript 的引用。

通过将 fancybox 引用移动到头部来解决此问题，如下所示：

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterClientScriptInclude(this.Page, GetType(), "fancybox1", "scripts/FancyBox/jquery.fancybox-1.3.4.pack.js");
    ScriptManager.RegisterClientScriptInclude(this.Page, GetType(), "fancybox2", "scripts/FancyBox/jquery.mousewheel-3.0.4.pack.js");
    Page.Header.Controls.Add(new LiteralControl("<link rel=\"stylesheet\" type=\"text/css\" href=\"scripts/FancyBox/jquery.fancybox-1.3.4.css\" />"));
}

一旦我们这样做了，它就开始为我们工作。