DataTables page 2 of pagination not calling Magnif

So I have this DataTable with pagination enabled which I coded a way so the user can edit lines of a table, when the user calls the edit page it opens in a Magnific Popup, it all works well on page 1, from page 2 of the DataTable and ahead it stops calling the Magnific Popup and I just can't find out why...

The edit.php with the form which opens inside the Magnific Popup has this div:

<div id="ajax-content" class="example-popup">

And the following css:

position: relative;
background: #FFF;
padding: 10px;
width: auto;
max-width: 750px;
margin: 20px auto;
color: #999;
font-weight: bold;

At my index I have this function:

$('.popup-ajax').magnificPopup({
   type: 'ajax',
   showCloseBtn: 'true',
   modal: 'true',
});

And this link to call the function:

echo '<td><a href="http://localhost/teste/include/edit.php?id=' . $row['id'] . '" class="popup-ajax">Editar</a></td>';

The process is Link which class calls the function and then opens the edit page inside the Magnific Popup.

Any help?

CAUSE

Only first page elements are available in DOM, that is why your jQuery selector $('.popup-ajax') doesn't select elements from pages other than first.

SOLUTION

You need to initialize Magnific Popup inside callback defined by drawCallback option. This function will be called every time the table has been redrawn.

For example:

var table = $('#example').DataTable({
   // ... skipped ...
   drawCallback: function(){
      $('.popup-ajax').magnificPopup({
         type: 'ajax',
         showCloseBtn: 'true',
         modal: 'true'
      });
   }
});