Fancybox链接在ajax之后不起作用

Question

我创建了fancybox表单：

$("a.productForm").fancybox({
    'hideOnOverlayClick' : true,
    'modal' : true,
    'hideOnContentClick' : false,
    'showCloseButton' : false,
    'padding' : 0,
    'transitionIn'  :   'elastic',
    'transitionOut' :   'elastic',
    'autoScale'     : false,
    'autoDimensions': false,
    'frameWidth': 717,
    'frameHeight': 900,
    'overlayOpacity': 0.4,
    'centerOnScroll' : false,
    'type': 'ajax',
    'ajax': {
    dataFilter: function(data) {
        return $(data).find('#form_wrapper')[0];}
}
}); 

您可以在this页面中看到它的工作原理。

要查看我的fancybox表单，请按绿色按钮：

正如你所看到的，在这个页面中所有的工作都很好，但我的代码在页面中不起作用，其中产品加载了ajax。您可以看到this页面。

当你按下此页面中的绿色按钮时，fancybox不会显示，而是直接进入链接。可能有什么不对？

也许我必须在加载whit ajax后将fancbox代码应用于此链接？

Answer 1

在收到html数据并添加到dom之后，你需要在ajax成功回调中执行$（“a.productForm”）。fancybox（...）。

这是一个简单的例子：

$.ajax({
  url: "test.html",
  success: function(data){
    $('#newest_desc').html(data); // Here you insert data which I'm expecting to be a string with html into the tab with the id "newest_desc". I got that from your website. Not sure if it's correct though.
    $("a.productForm").fancybox(...) // Here is where you call the fancybox function because now you know that the element a.productForm is available.
  }
});

Answer 2

您的javascript中似乎有一些错误。这会导致浏览器跟随链接。

如果您还没有Firebug，请安装Firebug，启用控制台，然后单击“persist”。这样，当浏览器更改页面时，errror不会消失，您将能够看到错误。