Question

请参阅下面的我的代码段，因为您可以看到其中的两个按钮，第一个按钮的文本为＆＃34;大胆的弹出式按钮＆＃34;这是有效的，而第二个按钮的目的是，如果你点击它，另一行将被添加到数据表，并在该行，那里有一个按钮，也类似于具有文本的大胆弹出按钮的功能（弹出一个巨大的盒子）但这不起作用，任何想法？

＆＃13;

$(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();
  });  
  
});

＆＃13;

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

＆＃13;

Answer 1

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

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

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

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

magnific popup不会使用由datatables创建的按钮

1 个答案: