I have created a datatables and add an image column into datatables. When i click image, i would like to image open at popup. It is work on for first page of datatable, however when i passed to second page, it doesn’t work. Also i put alert() to test second page event and alert() works, but popup does not.
Please check my snippets: https://jsfiddle.net/f08qdeq2/20/
How can i solve this problem, any ideas? Thank You
$(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
You should use fnDrawCallback for initialize your popup. try this…
$(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');
})
Result : https://jsfiddle.net/cmedina/f08qdeq2/21/