通过datatable jquery插件添加的按钮上的jQuery click事件

Question

我正在使用datatable插件创建一个表。已添加按钮到表的最后一列。问题：未触发点击按钮。

创建表的Javascript。

<script>
  $(document).ready(function() {
    $('#tagtbl').DataTable( {
        "paging": false,
        "info": false,
        "searching": false,
        "ajax": "../api/clienttagtbl.php?off=OFF002",
        "rowId": "id",
        "columns": [
            { "data": "tagname" },
            { "data": null, "defaultContent": '<button id="tagdelete" type="button" class="btn btn-danger btn-sm" >X</button>' }
        ]
    } );
  } );
</script>

Javascript，其中点击是

<script>
$(document).ready(function() {
  $('#tagdelete').click( function(){
    console.log("hi"); // <<---This is not working
  });
  $('#tagtbl').click( function(){
    console.log("hi2");  //<<---This is working
  });
});
</script>

HTML

    <table id="tagtbl" class="table table-sm" >
      <thead>
        <tr>
          <th>Tag Name</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Tag Name</th>
          <th></th>
        </tr>
      </tbody>
    </table>

Answer 1

试试这个

 $('#tagtbl').on('click','.tagdelete' function(){
    console.log("hi");
  });

我建议你为所有按钮使用一个类，而不是使用id。

Answer 2

您需要在datatable drawCallback函数中添加按钮单击

$('#example').dataTable( {
    "drawCallback": function( settings ) {
       $('#tagdelete').click( function(){
    console.log("hi");
  });
  $('#tagtbl').click( function(){
    console.log("hi2");
  });
    }
} );