javascript - jQuery:Fancybox 只能显示内联窗口一次，第二次尝试失败并出现错误: "Uncaught TypeError: Cannot call method ' 宽度'未定义”

Question

这个问题与jQuery: Fancybox produces a loop of errors in chrome using ajax非常相似，尽管在另一个问题中使用了 ajax。我正在使用内联来呈现一个 div。

我可以打开包含 div 的 fancybox 一次，然后再次关闭它。但是，如果我再次打开它，我会在控制台中看到以下错误，并且页面会更改为来自完全不同部分的页面中的随机文本部分:

Uncaught TypeError: Cannot call method 'width' of undefined

我在此页面上设置了 Fancybox，内容如下:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="./includes/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#admin_link").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'slide',
            'transitionOut'     : 'fade',
            'type'              : 'inline'
        });
    });
</script>
<link rel="stylesheet" type="text/css" href="./includes/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

div 是:

<div style="display: none;">
                <div id="admin_why_text" style="width:400px;height:300px;overflow:auto;">
                    Some text about why this is needed.
                </div>
            </div>

这个 div 是通过这个链接打开的:

      <ul><li>example point <br />=> <a id="admin_link" href="#admin_why_text" title="Why is.....?">why is...?</a></li></ul>

如您所见，基于之前其他用户看到的关于 ajax 的问题(不是我的问题，请参见上面的链接)，我尝试在我的代码中手动定义类型。不幸的是，这没有任何区别。

还有其他建议吗？或者有没有人在使用内联类型时见过这个？

编辑:少量添加，其他类型工作正常。我正在使用 iframe 类型来显示 youtube 视频，它们可以关闭和重新打开而不会出现任何问题。

Edit2:我发现当内联框加载时，我的 div 被替换为以下内容:

<div style="display: none;">
    <div class="fancybox-inline-tmp" style="display: none;"></div>
</div>

当盒子关闭时，我的 div 不会放回去。我需要找到它去了哪里，我可能可以使用 onCleanup 回调将其设置回来。

Answer 1

我找到了这个问题的答案。我正在使用最新的 jQuery，其中不推荐使用全局事件。在将 v1 FancyBox 与最新的 jQuery 一起使用时，我发现了两个关键问题:

1. 中描述的问题 https://github.com/fancyapps/fancyBox/issues/485
2. 这个问题。

除了问题 1 中建议的修改之外，以下更改为我修复了此问题:

---

在受影响的页面中，找到:

<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

更改以下内容以使用非打包版本:

<script type="text/javascript" src="./includes/fancybox/jquery.fancybox-1.3.4.js"></script>

---

在“jquery.fancybox-1.3.4.js”文件中，进行以下更改。

查找:$.event.trigger('fancybox-cancel');

替换为:$('.fancybox-inline-tmp').trigger('fancybox-cancel');

查找:$.event.trigger('fancybox-change');

替换为:$('.fancybox-inline-tmp').trigger('fancybox-change');

查找:$.event.trigger('fancybox-cancel');

替换为:$('.fancybox-inline-tmp').trigger('fancybox-cancel');

查找:$.event.trigger('fancybox-cleanup');

替换为:$('.fancybox-inline-tmp, select:not(#fancybox-tmp select)').trigger('fancybox-cleanup');

希望这能帮助遇到同样问题的其他人。