javascript - 带有AJAX加载内容的fancyBox无法正常工作

我正在尝试使fancyBox（从现在开始使用FB）无法正常工作。我将在下面解释我的工作。当然，第一个是包括以下FB脚本和样式：

<!-- fancyBox styles -->
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" rel="stylesheet">

<!-- fancyBox JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<script src="/app_dev.php/js/bmain_registro_2.js" type="text/javascript"></script>

在我的HTML代码中，我有以下内容：

<a href="#" class="getregistered">Register</a>
<div id="register"></div>

它是空的，因为内容是通过在bmain_registro_2.js上进行的AJAX调用加载的，如下所示。然后在bmain_registro_2.js中我这样写：

var $register = $("#register");

if ($register.length) {
    $register.load(Routing.generate('datos-basicos'));
}

$("#tabs").tabs();

$('.getregistered').on("click", function() {
    console.log("click");
    $("#register").fancybox({
        openEffect: 'elastic',
        closeEffect: 'elastic',
        autoSize: false,
        closeClick: false
    });
});

Routing.generate('datos-basicos')来自Symfony2和FOSJsRoutingBundle，但工作正常，因为我得到了要显示在模式上的内容。有问题吗？


模态内容不是隐藏的（请参见下图），我认为默认情况下应该隐藏





当我单击Register链接时，将执行console.log()代码，但模态永远不会显示


我在这里缺少什么，我的代码正确吗？

最佳答案

您只需要将“ fancybox”类添加到链接，如下所示：
<a href="#" class="fancybox" >Register</a>
问候..