Question

我想加载fancybox来显示div中的查询信息。在Firebug中，我可以看到一切顺利，但fancybox窗口没有像我期望的那样弹出。我错过了什么，以便它可以弹出？

<td><a class="pop" href="#gps_information" id="<?php echo $gps->labref ?>"><?php echo $gps->labref ?></a><input type="hidden" id="labref" value=""/></td> 


<div id="gps_information">    
    </div> 

$(document).ready(function () {
    $('.pop').click(function () {
        labref = $(this).attr('id');
        $.ajax({
            type: "GET",
            url: "<?php echo base_url(); ?>sample_location/gps/" + labref,
            dataType: "json",
            success: function (data) {
                var data = "I am waiting";
                $('#gps_information').html(data);

                $('.pop').fancybox({});

                return true;
            },
            error: function (data) {
                return false;
            }
        });
        return false;
    });
});

Answer 1

一些注意事项，

1）。这个

$('.pop').fancybox({});

...实际上并没有触发fancybox，只有将 fancybox绑定到选择器.pop

2）。如果ajax成功，您将最终将两个事件处理程序应用于同一个选择器

$('.pop').click({});
$('.pop').fancybox({});

...因为第一个返回false，第二个将永远不会生效。

3）。如果填充div（<div id="gps_information">）背后的想法只是为了在fancybox中显示它，那么你根本不需要它。您可以直接在fancybox中显示返回的ajax data，而不会填充div。

话虽如此，您可以通过这种方式调整代码：

$jQuery(document).ready(function () {
    $('.pop').click(function () {
        labref = $(this).attr('id');
        $.ajax({
            type: "GET",
            url: "<?php echo base_url(); ?>sample_location/gps/" + labref,
            dataType: "json",
            success: function (data) {
                //var data = "I am waiting"; // it would override returned data, wouldn't it?
                //$('#gps_information').html(data);
                $.fancybox(data, {
                    // API options here
                });
                // return true; // need no more
            },
            error: function (data) { // (data) what for?
                return false;
            }
        });
        return false;
    });
});

在ajax成功函数中加载fancybox

1 个答案: