更改 DOM 后 jQuery FancyBox 无法正常工作答案

【问题标题】：jQuery FancyBox not working after altering DOM更改 DOM 后 jQuery FancyBox 无法正常工作
【发布时间】：2011-12-22 19:29:47
【问题描述】：

我们正在使用Fancybox 为我们的图片库提供一个灯箱。

我们有一个带有“图像”类的 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 在这种情况下正常工作？

您可以在我们的测试服务器this link 上实时查看示例。点击“图片”，然后点击图片。

【问题讨论】：

我的第一个猜测是您的 DOM 操作以某种方式搞砸了您的 HTML。您是否查看过控制台中的 DOM 元素以查看是否所有内容都在正确的位置？我认为您在更改 DOM 时覆盖了部分 JavaScript。虽然没有看到演示页面，但我不确定您将如何获得好的答案。
@Sparky672：DOM 操作没有改变 UL 或嵌套元素的 HTML，我上面列出的 javascript 运行。
如果它导致错误，则附加 Fancybox 行为。错误来自 Fancybox 代码还是您自己的？猜测一下（没有演示来查看所有这些功能在做什么）Fancybox 代码在页面加载时附加，然后您删除元素，破坏 Fancybox，然后重新附加它只会导致混乱。尝试找出调用不相关函数的原因以及调用时间。
@Blowski，我在我们的测试服务器上包含了一个演示链接。
</img> 标记对于您选择的Doctype 不是有效的 HTML。对于您的Doctype，<img> 标签应使用/> 自动关闭。此外，由于 Javascript 错误被标记为来自 Google Analytics 代码，只需删除 Google Analytics 代码即可测试它是否开始工作。

标签： jquery dom fancybox

【解决方案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\" />"));
}

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

【讨论】：

LOL...我在 12/22 的第一条评论：“我的第一个猜测是你的 DOM 操作以某种方式搞砸了你的 HTML。” 无论如何，很高兴你想到出来吧。