放大的弹出窗口在数据表的第二页上不起作用

Posted 2023-05-07

【中文标题】放大的弹出窗口在数据表的第二页上不起作用

【英文标题】：Magnific popup does not work on second page of Datatables

【发布时间】：2016-06-30 02:08:09

【问题描述】：

我创建了一个数据表并将图像列添加到数据表中。当我单击图像时，我想在弹出窗口中打开图像。它适用于数据表的第一页，但是当我传递到第二页时，它不起作用。我也将 alert() 用于测试第二页事件并且 alert() 有效，但弹出窗口无效。

请查看我的 sn-ps： https://jsfiddle.net/f08qdeq2/20/

我该如何解决这个问题，有什么想法吗？谢谢你

 $(document).ready(function() 
  var table = $('#datatable').dataTable(
    aLengthMenu: [
      [1, 2],
      [1, 2]
    ],
    iDisplayLength: 1
  );
);

$(this.document).ready(function() 

  $('.image-popup').magnificPopup(
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,

    image: 
      verticalFit: true
    ,
    zoom: 
      enabled: true,
      duration: 300 // don't foget to change the duration also in CSS
    ,

  );

);

$(document).on('click', '.image-popup', function() 

  alert('You Clicked Image');

  //$('.image-popup-no-margins').magnificPopup(
  //Some Working code here
   //);
)

【参考方案1】：

您应该使用fnDrawCallback 来初始化您的弹出窗口。试试这个...

$(document).ready(function() 


var table = $('#datatable').dataTable(
aLengthMenu: [
  [1, 2],
  [1, 2]
],
iDisplayLength: 1,
"fnDrawCallback": function () 
    $('.image-popup').magnificPopup(
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,

image: 
  verticalFit: true
,
zoom: 
  enabled: true,
  duration: 300 // don't foget to change the duration also in CSS
,

);

);
);


$(document).on('click', '.image-popup', function() 

     alert('You Clicked Image');
)

结果：https://jsfiddle.net/cmedina/f08qdeq2/21/

【参考方案2】：

只需添加它即可用于正常的点击事件，基于此您可以对模型（弹出窗口）进行任何操作。

$(document).on('click', '.image-popup', function()  
     alert('You Clicked Image');
)