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

Question

I'm trying to get fancyBox (FB from now on) working and can't get it. I'll explain below what I do. The first is, of course, include the FB scripts and styles as follow:

<!-- 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>

In my HTML code I have this:

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

It's empty because the content is loaded trough AJAX call made on bmain_registro_2.js as you'll see below. Then in bmain_registro_2.js I write this:

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') comes from Symfony2 and FOSJsRoutingBundle but it's working fine because I get the content I want to show on the modal. The problems?

• The modal content isn't hide (see the image below) and I think should be hide by default

• When I click on Register link the console.log() code is executed but the modal never show up

What I'm missing here and is my code right?

Answer 1

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