checkbox in paginated datatable

Question

У меня есть datatable и кнопки для удаления и обновления. И эти кнопки отключены. У меня также есть checkbox в первом столбце каждой строки. Всякий раз, когда я нажимаю этот флажок, кнопка редактирования и удаления будет включена. Он работает на первой странице моего datatable, но когда я нажимаю строку с других страниц данных, она не включает кнопки. В чем проблема? У меня есть этот код:

HTML таблицы:

<table class="table table-bordered table-hover table-striped" id="account_data" width="100%" style="margin-top: 0px"> <thead class="header"> 

     <tr class="well"><th colspan="3" style="text-align:center">LIST OF USERS</th></tr> 
     <tr class="well"> 
     <th style="width: 5px"><input type="checkbox" class="check"/></th> 
     <th style="font-size: 14px;padding-left: 20px;"> ID#</th> 
     <th style="font-size: 14px;padding-left: 20px;"> Name</th> 

     </tr> 
    </thead> 

    <tbody> 
     <?php if($users != NULL){?> 
     <?php foreach($users as $row){ ?> 

      <tr> 
       <td align="center"><input type="checkbox" class="accounts" name="accounts[]" value="<?php echo $row->user_id;?>"/></td> 
      <td style="font-size: 15px;padding-left: 20px;"><?php echo $row->user_id;?></td> 
       <td style="font-size: 15px;padding-left: 20px;"><?php echo $row->user_name;?></td> 

      </tr> 
     <?php }?> 
     <?php }?> 
    </tbody> 
    </table> 

Jquery:

<script> 
$(document).ready(function(){ 
    var count=0; 
    var chkId=new Array(); 
    var checkedValue =''; 
    $('.check').click(function() { 
     $(" .check").each(function() { 
      if($(this).is(":checked")) 
      { 
       $(" .accounts").prop('checked',true); 
       // $('#edit_acc').prop('disabled',false); 
       var n = $(" .accounts:checked").length; 

       if(n==1){ 
        $('#edit_acc').prop('disabled',false); 
       } 
       if(n>1){ 
        $('#edit_acc').prop('disabled',true); 
       } 
       $('#delete_acc').prop('disabled',false); 
       return 
      } 
      $(" .accounts").prop('checked',false); 
      $('#edit_acc').prop('disabled',true); 
      $('#delete_acc').prop('disabled',true); 
     }); 

    }); 
}); 
</script> 

Answer 1

Проблема заключается в том, что флажки на странице # 2 вперед и не является частью DOM, когда ваш $(document).ready() является уволена. jQuery dataTables вводят и удаляют строки, чтобы показывать разные страницы.

Таким образом, вы должны использовать делегированный обработчик событий вместо click(). К этому, динамически впрыскивается строки (т.е. их флажками) также будут включены:

$('#account_data').on('click', '.check', function() { 
    ... 
}); 

вместо $('.check').click(function() {