jQuery:Fancybox只能显示内联窗口一次,第二次尝试失败并显示错误:"未捕获的TypeError:无法调用未定义的方法'width'"

Question

这个问题与jQuery非常相似:Fancybox使用ajax在chrome中产生一个错误循环,尽管在另一个问题中使用了ajax.我使用内联来呈现div.

我可以打开包含div的fancybox,然后再关闭它.但是,如果我再次打开它,我在控制台中看到以下错误,页面从一个完全不同的部分变为页面中随机部分的文本:

未捕获的TypeError:无法调用未定义的方法'width'

我在此页面上设置了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');

希望这会帮助那些陷入同样问题的人.