Fancybox 数据源在数据表的第 2 页之后不起作用答案

【问题标题】：Fancybox data-source not working after page 2 of datatablesFancybox 数据源在数据表的第 2 页之后不起作用
【发布时间】：2019-08-02 02:09:13
【问题描述】：

这是错误还是……我是笨蛋？

对于初学者，我正在使用 jQuery 数据表和花式应用程序编写一些 PHP 代码。我正在使用该行中的 id 在数据表行上创建一些按钮。代码太长，很多js/css扩展，这里是代码笔：

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

所有链接都适用于fancyapp，但为什么数据表第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>

更奇怪的是，所有页面的[编辑]按钮都在起作用。有什么我想念的吗？因为这个，我觉得真的很笨。

【问题讨论】：

标签： jquery html datatables fancybox

【解决方案1】：

Fancybox 默认使用[data-fancybox] 属性通过委托进行初始化，这就是无论表格重绘如何，您的编辑链接都可以正常工作的原因。

但是，您会注意到您的设置不会保留在编辑链接中，这是您的第一条线索。

您想在每次绘制/重绘表格时初始化 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
    }
  });
})

根据this updated example。

【讨论】：

它的工作！谢谢。但我还是一头雾水，所以在使用 2 个或更多 data-fancybox 时必须使用绘图功能吗？
Fancybox 不会在变异的 dom 元素上初始化，除非您在 dom 更改时以编程方式初始化库，这就是这个答案所暗示的。

【解决方案2】：

当您使用$(something).fancybox() 初始化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();
    }
});

【讨论】：