Uncaught TypeError: $(...).fancybox is not a function

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();

第一个点击 link 将打开 fancybox。然后下一个点击 link 将不会打开 fancybox 并且只显示空白覆盖。

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

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

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

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

有什么方法可以使 fancybox 工作而无需每次单击 link 时都刷新页面？

已更新

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

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对象被重写了。

更新：

这是一个工作副本，只需在 link 单击时使用 $.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