magnific popup won't work on a button that was created by datatables

Question

See my snippets below, as you can see there's two buttons, the first button that has a text of "magnific popup" and this works while the second button purpose is, if you click on it another row will be added unto the datatable and within that row, there's a button that also similar to the function of the button that has a text of magnific popup (popup a magnific box) but this don't work, any ideas?

$(document).ready(function(){
  
  //magnific popup
         $('.open-popup-link').magnificPopup({
         type:'inline',
          removalDelay: 500,
            callbacks: {
                beforeOpen: function () {
                    this.st.mainClass = this.st.el.attr('data-effect');
                },
            },
            enableEscapeKey: false,
            midClick: true
         
        });
  
  
  $('#ua_table').DataTable({
        "pagingType": "full_numbers",
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "//cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf"
        }
    });
  
  $(".load").click(function(){
    $('#ua_table').DataTable().row.add(['Sample name', 'Sample address', 'Sample Job', '<button href="#ad_apply_update_popup" class="open-popup-link green_button" data-effect="mfp-zoom-in">Update</button>']).draw();
  });  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<link href="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet"/>  

<script src="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js"></script>


<table class="table table-striped table-bordered" id="ua_table">
  <thead>
    <th>Name</th>
    <th>Address</th>
    <th>Job</th>
    <th>Contact</th>
  </thead>
  <tbody>
    <tr>
      <td>Sample name 1</td>
      <td>Sample address 1</td>
      <td>Sample job 1</td>
      <td>Sample contact 1</td>
    </tr>
    <tr>
      <td>Sample name 2</td>
      <td>Sample address 2</td>
      <td>Sample job 2</td>
      <td>Sample contact 2</td>
    </tr>
    <tr>
      <td>Sample name 3</td>
      <td>Sample address 3</td>
      <td>Sample job 3</td>
      <td>Sample contact 3</td>
    </tr>
  </tbody>
 </table>

<button class="load">Load ajax</button>

<div id="ad_apply_update_popup" class="white-popup cos-popup mfp-with-anim mfp-hide" style="width: 380px;">
    test
</div>

<button href="#ad_apply_update_popup" class="open-popup-link green_button" data-effect="mfp-zoom-in">magnific popup</button>

Answer 1

This is because $('.open-popup-link') only add popups to existing elements, anything you added after the initial page load is not affected.

To make the code work for all current and future elements, you need to do something like this:

$(document).on('click','.open-popup-link',function(){
    $(this).magnificPopup({
        // code to initialize popup
    }).magnificPopup('open');
});

Demo: http://jsfiddle.net/alan0xd7/9weL8ovf/