javascript - 放大弹出窗口不适用于由数据表创建的按钮

Question

请参阅下面的我的代码片段，您可以看到有两个按钮，第一个按钮具有“放大弹出窗口”的文本，这可以工作，而第二个按钮的目的是，如果您单击它，另一行将添加到数据表中，在该行中，有一个按钮，也类似于具有放大弹出文本的按钮的功能(弹出放大框)，但这不起作用，有什么想法吗？

$(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

这是因为 $('.open-popup-link') 仅向现有元素添加弹出窗口，初始页面加载后添加的任何内容都不会受到影响。

要使代码适用于所有当前和 future 的元素，您需要执行以下操作:

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

演示:http://jsfiddle.net/alan0xd7/9weL8ovf/