jQuery FancyBox改变DOM后不工作

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 is undefined'。这个错误被列在第17行，在一个完全不相关的方法中。即使该方法被try/catch块包围，也会发生错误。此错误不会在随后点击图像时发生，该图像不会产生任何结果。

在这种情况下，我该怎么做才能让Fancybox工作呢?

您可以在这个链接上看到我们测试服务器上的一个示例。点击"Images"，然后点击图片

Answer 1

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

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

通过将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" />"));
}

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