通过数据表jQuery插件添加的按钮上的jQuery单击事件

Posted 2023-05-09

【中文标题】通过数据表jQuery插件添加的按钮上的jQuery单击事件

【英文标题】：jQuery click event on button added through datatable jquery plugin

【发布时间】：2018-05-13 23:40:12

【问题描述】：

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

创建表的 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>

调用 On click 的 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>

【参考方案1】：

试试这个

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

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

【讨论】：

给按钮一个类并使用上面的代码。

关于我的方法为什么不起作用的任何见解。我对jQuery很陌生@

你能在 jquery 中搜索事件委托吗？这会让你对你的问题有足够的了解。

【参考方案2】：

你需要在数据表drawCallback函数中添加按钮点击

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