단추가있는 td를 사용하여 DataTable에 새 행을 추가하십시오.

Question

fnAddData을 통해 DataTable에 행을 동적으로 추가 할 수 있습니다. 새 행을 추가하면 btn-edit의 수정 버튼이있는 td 버튼이 추가됩니다. 선택자로 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')); 
}); 
}); 

당신이 동적으로 생성 된 DOM 요소를 호출하는 방법을 https://jsfiddle.net/33Lbayx3/2/

Answer 1

이잖아.

$(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