的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

如果你想创建的HTML被传递到的fancybox然后，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