jquery - Fancybox 不起作用

Question

这是我的表格

<form id="detail_form" class="hidden">
...
</form>

我有一个链接

<a href='#detail_form' class='btn fancybox detail'> Details...</a>

这是我处理点击a#detail_form的脚本。它工作正常

$(".detail").on('click', function () {
    var self = $(this).parent().parent();
    $.ajax({
        type: 'post',
        url: 'details',
        data: {
            id: self.children("input").attr("value")
        }
    }).done(function (data) {
        if (data == "true") {
            var a = self.children("a").children("span");
            a.html(parseInt(a.html()) + 1);

        }
    });
    return false;
});

我也叫fancybox

$(".fancybox.detail").fancybox({
    width: 600,
    autoDimensions: true,
    fitToView: false,
    scrolling: 'no'
});

当我点击 a#detail_form 时，我的脚本正在启动，但 fancybox 没有响应。

Answer 1

如果您想创建要传递给 fancybox 的 HTML，则Refernce

你可以这样尝试

$(document).ready(function () {
    $(".detail").on('click', function () {
        $.fancybox({
            'content': $("#detail_form").html() // Form as HTML Content
        });
    });
});

Fiddle

或者你可以用你当前的方法尝试这样

$(document).ready(function () {
    $(".detail").fancybox({
        width: 600,
        autoDimensions: true,
        fitToView: false,
        scrolling: 'no',
       'content': $("#detail_form").html() //Form as HTML Content
    });
});

Fiddle