Question

我可以通过fnAddData向DataTable动态添加一行。添加新行后，td的编辑按钮会显示btn-edit。我打算使用btn-edit作为选择器，但我无法在点击时调用它。

HTML

<button id="add-row">Add Row</button>

<table id="example" class="display" cellspacing="0" width="100%">
 <thead>
  <tr>
   <th>Name</th>
   <th>Position</th>
   <th>Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Tiger Nixon</td>
   <td>System Architect</td>
   <td><button class='btn-edit' btn-id='1'>Edit</button></td>
  </tr>
  <tr>
   <td>Garrett Winters</td>
   <td>Accountant</td>
   <td><button class='btn-edit' btn-id='2'>Edit</button></td>
  </tr>
 </tbody>
</table>

的jQuery

$(document).ready(function() {
 $('#example').DataTable();

 var obj = {3: {'name':'Rose','position': 'VP'}, 4: {'name':'Jack','position': 'Captain'}};

 var count = 3;
 $('#add-row').on('click',function() {
  $('#example').dataTable().fnAddData( [
   obj[count].name,
   obj[count].position,
   "<button class='btn-edit' btn-id='"+count+"'>Edit</button>" 
  ]).draw();
  count++;
 });

 $('.btn-edit').click(function() {
  alert($(this).attr('btn-id'));
 });
});

https://jsfiddle.net/33Lbayx3/2/

Answer 1

这就是如何调用动态创建的DOM元素。

   $(document).ready(function() {
         $('#example').DataTable();

         var obj = {3: {'name':'Rose','position': 'VP'}, 4: {'name':'Jack','position': 'Captain'}};

         var count = 3;
         $('#add-row').on('click',function() {
          $('#example').dataTable().fnAddData( [
           obj[count].name,
           obj[count].position,
           "<button class='btn-edit' btn-id='"+count+"'>Edit</button>" 
          ]).draw();
          count++;
         });
         $(document).on("click",".btn-edit",function(){

         alert(1);
         })  

        });

你可以测试working

使用带有按钮的td向DataTable添加新行

1 个答案: