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

Question

我已经创建了一个数据表，并在数据表中添加了图像列。当我单击图像时，我想在弹出窗口中打开图像。它适用于数据表的第一页，但是当我传递到第二页时，它不起作用。我也把 alert（） 来测试第二页事件和 alert（） 工作，但弹出窗口没有。

请检查我的片段：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
   //});
})

Answer 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/

Answer 2

只需添加此功能即可用于普通点击事件，基于此，您可以使用模型（弹出窗口）执行任何操作。

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