Javascript jQuery:Fancybox只能显示一次内联窗口,第二次尝试失败,错误为;未捕获类型错误:无法调用方法';宽度';“未定义”的定义;

Javascript jQuery:Fancybox只能显示一次内联窗口,第二次尝试失败,错误为;未捕获类型错误:无法调用方法';宽度';“未定义”的定义;,javascript,jquery,html,css,fancybox,Javascript,Jquery,Html,Css,Fancybox,这个问题与非常相似,尽管在另一个问题中使用了ajax。我正在使用inline来表示div 我可以打开包含div的fancybox一次,然后再关闭它。但是如果我再次打开它,我会在控制台中看到以下错误,页面会从完全不同的部分更改为页面中的随机文本部分: 未捕获的TypeError:无法调用未定义的方法“width” 我在此页面上设置了Fancybox,其中包含以下内容: <script type="text/javascript" src="http://code.jquery.com/jqu

这个问题与非常相似,尽管在另一个问题中使用了ajax。我正在使用inline来表示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 style="display: none;">
    <div class="fancybox-inline-tmp" style="display: none;"></div>
</div>

$(文档).ready(函数(){
$(“#管理链接”).fancybox({
“标题位置”:“内部”,
“transitionIn”:“slide”,
“transitionOut”:“fade”,
“类型”:“内联”
});
});
分区为:

<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被替换为以下内容:

<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 style="display: none;">
    <div class="fancybox-inline-tmp" style="display: none;"></div>
</div>


当盒子关上时,我的div就不会放回去了。我需要找到它的位置,我可能可以使用onCleanup回调将其设置回原位

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

  • 中描述的问题
  • 这个问题
  • 除了第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')。触发器('fancybox-cancel')

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

    替换为:
    $('.fancybox inline tmp')。触发器('fancybox-change')

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

    替换为:
    $('.fancybox inline tmp')。触发器('fancybox-cancel')

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

    替换为:
    $('.fancybox内联tmp,选择:非(#fancybox tmp选择))。触发器('fancybox-cleanup')


    希望这能帮助其他在同一问题上陷入困境的人。

    只需使用一个Jquery库文件即可

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    
    
    

    
    

    但不是两者都有

    无需破解fancybox.js文件,以下内容可能适用于您

    $(document).ready(function() {
        $("#admin_link").on("click", function (e) {
            $.fancybox($(#admin_why_text).text(), {
                'title'             : $(this).attr('title'),
                'titlePosition'     : 'inside',
                'transitionIn'      : 'slide',
                'transitionOut'     : 'fade',
                'type'              : 'inline'
            });
        });
    });
    
    这将有效地更改代码,使其使用“ajax方法”而不是“内联方法”进行操作,但仍然从同一位置获取信息&不会用
    class=“fancybox inline tmp”
    元素替换
    id=“admin\u why\u text”
    元素

    更通用的版本将基于触发器元素的href以文本元素为目标,其工作方式如下:

    $(document).ready(function() {
        $("#admin_link").on("click", function (e) {
            $.fancybox($("#" + $(this).attr('href').substring(1)).text(), {
                'title' : $(this).attr('title'),
                'titlePosition'     : 'inside',
                'transitionIn'      : 'slide',
                'transitionOut'     : 'fade',
                'type'              : 'inline'
            });
        });
    });
    

    我在加载fancybox的函数中添加了以下内容:

    var txt1=“”


    因此,如果div inline1不存在,将其添加到父div“ix01”中,对我来说效果很好。

    您只需要一个jQuery实例,所以要么是这个,要么是这个,而不是两个,我对此不确定。我已经删除了min实例,但问题仍然存在。您还有其他想法吗?进一步调查,我的div似乎在盒子加载时被替换为这个,但在盒子关闭时不会后退:可能是我没有注意到的副本,但您使用的是fancybox v1.3.4,该版本不适用于jQuery 1.9+请参阅以获得解决方法谢谢您的回答。不幸的是,这不是问题所在,尽管我已经纠正了上述问题。我发现了这个问题并修复了它,全局事件在稍后的jQuery中被弃用,破坏了fancybox的一些功能(请参阅我对这个问题的回答)。因为在您回答之前7小时的评论区域中已经建议使用-1。注:Jquery应该是jQueryGood point,有时一个或多个单行程序失败会带来大的失败建议的解决方案不适用于jQuery1.11和fancybox 1.3.4,fancybox尝试打开URL而不是显示内联HTML。这对我来说很有效——运行jQuery1.11.2和fancybox 1.3.4。与我的div被替换为
    的问题相同。非常感谢。很高兴它起到了作用:)这太令人沮丧了