未捕获的类型错误：$(...).fancybox 不是函数

Question

HTML

<div class="test">
<a href="/example/123.html" class="fancybox"> link 1</a>
<a href="/example/123.html" class="fancybox"> link 1</a>
<a href="/example/123.html" class="fancybox"> link 1</a>
</div>

JQuery - 更新

$('.fancybox').each(function(){
            $(this).fancybox({
                type: 'ajax',
                autoHeight: true,
                width: 930,
                autoSize: false,
                autoCenter: true,
                fitToView: false,
                topRatio: 0,
                arrows: false,
                closeBtn: true,
                closeClick: true,
                autoPlay: false,
                openSpeed: 1,
                closeSpeed: 'fast',
                closeClick: false,
                live: true,
                helpers: {
                    overlay: {
                        openSpeed: 'fast'
                    }
                }
            });
        });

Jsfiddle demo

仅尝试过

$('.fancybox').fancybox();

第一个点击的链接将打开fancybox。然后下一个点击的链接将不会打开fancybox，只会显示空白覆盖。

注意到如果使用parent.location.reload(true);，它会通过刷新整个页面然后显示fancybox 来工作。那不是我想要的。每次单击不同的链接并显示fancybox 时它都应该工作而不刷新。

认为使用 ajax 可以让 href 处理然后显示 fancybox 但它不起作用:(

另一件事是Fancybox 似乎不止一次被初始化。如何防止它被多次初始化？

得到错误：`Uncaught TypeError: $(...).fancybox is not a function

有什么方法可以让fancybox 工作而不必每次点击链接都刷新页面？

更新

我编辑了上面的代码，它仍然给我带来麻烦。

Answer 1

我认为您的问题是您正在处理多个 ajax 请求。

Fancybox 只需使用 :

即可支持 ajax

$("#various3").fancybox({
        ajax : {
            type    : "POST",
            data    : 'mydata=test'
        }
    });

它会在其中查看通过 AJAX 调用的 href 属性中处理文件的结果。

因此，在您的代码中，您不需要处理 jquery ajax 并在其中调用 fancybox。相反，您可以在 ajax 模式下调用 fancybox，这样就可以解决问题。

您可以查看Official FancyBox Site 以使用它处理 AJAX。

至于初始化，这真的取决于你的fancybox js 脚本加载。 fancybox javascript 文件将在您的页面中加载一次。

在 html 元素上多次使用$(element).fancybox({}) 不会重新初始化元素内的当前对象，但会使用新调用重置它。换句话说，fancybox 对象在元素中被覆盖。

更新：

这是一个工作副本，只需在单击链接时使用 $.fancybox({})，防止默认事件行为并将所需位置设置为 href 元素本身，确保只导入一次 jquery，以免覆盖它：

<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>


<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

<div class="test">
<a href="/example/123.html" class="fancybox_ajax"> link 1</a>
<a href="/example/123.html" class="fancybox_ajax"> link 2</a>
<a href="/example/1236.html" class="fancybox_ajax"> link 3</a>
</div>

<script type="text/javascript">
        $(document).ready(function() {
    $('.fancybox_ajax').on('click', function(e){
                    e.preventDefault();

                    $.fancybox({
                        width: 400,
                        height: 400,
                        autoSize: false,
                        href: $(this).attr("href"),
                        type: 'ajax'
                    });
                });

});
    </script>

上次更新 - 修复 jquery 冲突问题

我通过为 jquery 库设置一个新别名来实现这一点，$ 似乎与之后加载的另一个 javascript 库冲突，它没有找到 fancybox 插件。newFiddle