jQuery：Fancybox只能显示内联窗口一次，第二次尝试失败，出现错误：“Uncaught TypeError：Can not call method'width'of undefined” [英] jQuery: Fancybox can only show inline window once, second attempt fails with error: "Uncaught TypeError: Cannot call method 'width' of undefined"

问题描述

这个问题与 jQuery非常相似：Fancybox使用ajax在Chrome中产生一个错误循环，虽然在使用其他问题ajax。我使用内联来呈现div。

This issue is very similar to jQuery: Fancybox produces a loop of errors in chrome using ajax, although in the other issue ajax is being used. I'm using inline to present a div.

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

I can open the fancybox containing the div once, and close it again. But if I open it again, I see the following error in the console, and the page changes to a random portion of text from the page from a completely different section:

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

Uncaught TypeError: Cannot call method 'width' of undefined

我在此页面上设置了Fancybox

I have Fancybox set up on this page with the following:

<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通过此链接打开：

And this div is opened via this link:

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

正如你所看到的，基于上一个问题，其他用户看到ajax ，见上面的链接），我已经尝试在我的代码手动定义类型。这不幸没有任何区别。

As you can see, based on the previous issue that the other user saw with ajax (not my issue, see link above), I have tried defining the type manually in my code. This unfortunately made no difference.

有人会有任何其他建议吗？或者有任何人在使用内联类型时看到这个？

Would anybody have any other suggestions? Or has anyone seen this before when using the inline type?

编辑：小的，其他类型都工作正常。我使用iframe类型来显示youtube视频，他们可以关闭并重新打开没有任何问题。

Minor addition, other types are working fine. I'm using the iframe type to display youtube videos, and they can be closed and reopen without any issues.

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

I've found that when the inline box loads, my div is replaced with the following:

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

当框关闭时，我的div不会被放回。我需要找到这里已经走了，我可以使用onCleanup回调来设置回来。

When the box is closed, my div isn't put back. I need to find where this has gone, I can probably use the onCleanup callback to set it back.

推荐答案

我找到了这个问题的答案。我使用最新的jQuery，其中全局事件已弃用。有两个关键问题，我发现使用v1 FancyBox与最新的jQuery：

I've found the answer to this problem. I'm using the latest jQuery, in which global events are deprecated. There are two key issues I have found in using the v1 FancyBox with the latest jQuery:

1. 在
   https://github.com/fancyapps/fancyBox/issues/485


2. 这个问题。

对于第1期建议的修改，以下更改为我修正：

Further to the edits suggested from issue 1, the following changes fixed this for me:

在受影响的网页中，查找：

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

更改以使用未打包的版本：

Change to the following to use the non packed version:

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

---

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

---

In the "jquery.fancybox-1.3.4.js" file, make the following changes.

查找： $。event.trigger（'fancybox-cancel '）;

替换为： $（'。fancybox-inline-tmp '）.trigger（'fancybox-cancel'）;

查找： $ .event.trigger（'fancybox-change'）;

替换为： $（'。fancybox-inline-tmp'）。trigger（'fancybox-change'）;

>： $。event.trigger（'fancybox-cancel'）;

strong>： $（'。fancybox-inline-tmp'）。trigger（'fancybox-cancel'）;

查找： $。event.trigger（'fancybox-cleanup'）;

替换为： $（'fancybox-inline-tmp，select：not（＃fancybox-tmp select）'）。trigger（'fancybox-cleanup'）;

Replace with: $('.fancybox-inline-tmp, select:not(#fancybox-tmp select)').trigger('fancybox-cleanup');

希望这会帮助那些在同一问题上困扰的人。

Hopefully this will help others who get stuck on the same issue.

这篇关于jQuery：Fancybox只能显示内联窗口一次，第二次尝试失败，出现错误：“Uncaught TypeError：Can not call method'width'of undefined”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！