Fancybox数据包在DataTables的第2页之后无法使用

Question

是错误还是...我愚蠢？

对于初学者，我正在使用jQuery DataTables和FancyApps编写一些PHP代码。而且，我在DataTables行上使用该行中的ID创建一些按钮。代码太长，有许多JS/CSS扩展名，因此在这里代码笔：

https://codepen.io/anon/pen/rxprey

所有链接都适用于FancyApp，但是为什么DataTables第2-3页的[详细信息]按钮不起作用？它在此代码

中开始

<td>
    <a data-fancybox2 data-type="iframe" href="javascript:;" data-src="detail.php?id=15" class="smallbutton">Detail</a> <a class="smallbutton" data-fancybox data-type="iframe" href="javascript:;" data-src="edit.php?id=15">Edit</a> 
    <a class="smallbutton" href="delete.php?id=15">Delete</a> 
</td>

更奇怪的是，所有页面中的[编辑]按钮正在工作。我缺少什么吗？因此，我真的很愚蠢。

Answer 1

fancybox是通过默认情况下使用[data-fancybox]属性来初始化的。

但是，您会注意到您的设置不会持续到编辑链接，这是您的第一个线索。

您想每次绘制/重新绘制表格时都要初始化花哨的盒子。

table.on('draw', function() {
  $('[data-fancybox]', this).fancybox({
    toolbar: false,
    smallBtn: true,
    iframe: {
      preload: false,
      css: {
        width: '600px'
      }
    },
    afterClose: function() {
      window.location.reload();
    }
  });
  $('[data-fancybox2]', this).fancybox({
    width: 600,
    toolbar: false,
    smallBtn: true,
    iframe: {
      preload: false
    }
  });
})

根据此更新的示例。

Answer 2

使用$(something).fancybox()初始化花式箱时，您将为当前存在的项目应用自定义选项。对于将来将来存在的项目，您必须在出现在DOM中或使用selector选项之后再次初始化(请参阅http://fancyapps.com/fancybox/3/docs/#usage(，示例：

$().fancybox({
    selector : '[data-fancybox]',
    toolbar: false,
    smallBtn: true,
    iframe: {
        preload: false,
        css : {
            width: '600px'
        }
    }, 
    afterClose : function() { 
        window.location.reload();
    }
});