使用帶按鈕的td向DataTable添加新行

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