javascript - Ajax 后 Fancybox 链接不起作用

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不会显示，而是直接转到链接。可能出了什么问题？

也许我必须在使用 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.
  }
});