xanderlopez xanderlopez - 4 months ago 31
jQuery Question

Add new row to DataTable with td that has buttons

I can dynamically add a row to DataTable via

fnAddData
. Upon adding a new row, a
td
with an edit button that has a
btn-edit
. I intend to use
btn-edit
as a selector but I was unable to call it upon click.

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

thats how you can call a dynamically created DOM element.

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

        });

you can test working