クリック可能な行は、データテーブルの最初のページでのみ動作します

Question

私は助けが必要です。ブートストラップデータテーブルにレコードを表示するページがあります。レコードはページごとに10行表示され、各行には左の列にチェックボックスがあります。私がしたいのは、ユーザーが行をクリックすると、チェックボックスをチェックして、テーブルの後ろにあるボタンを有効にします（ユーザーは少なくともボタンを有効/有効にするためにチェックボックスを選択する必要があります）。私はすでにこれを実装しましたが、残念ながら最初のページでしか動作しません。ユーザーが2番目のページに移動してテーブル行をクリックすると、チェックボックスはチェックされません。誰でも私を助けることができますか？私はそれほど感謝します。

//disable button when no records are selected 
var checkboxes = $("input[type='checkbox']"); 
var btn = $("#button"); 
btn.attr("disabled","disabled"); 

checkboxes.on('click', function(event) { 
    if($(this).prop('checked')){ 
     btn.removeAttr('disabled'); 
    } else { 
     btn.attr("disabled",!checkboxes.is(":checked")); 
    } 
}); 

//this will check the checkbox whenever user clicks the table row 
$('.clickable-row').click(function (event) { 
    if (event.target.type !== 'checkbox') { 
     $(':checkbox', this).trigger('click'); 
    } 
}); 

Answer 1

jQueryでDataTablesを使用すると、プラグインは、ページを切り替えるときにDOMに要素を追加したり削除したりして、ページに表示される行を管理します。表がロードされると、DOMに存在する行はその最初のページに表示される行だけです。

これは、ハンドラが最初のページの要素に追加されたことを意味し、ページを切り替えるとそれらの要素が削除されるため、ページ1に戻ったときにハンドラを付けずに新しく作成された要素になります。

これにあなたのコードを変更

：

$('#some-table-id').on('click','.clickable-row', function (event) { 
    if (event.target.type !== 'checkbox') { 
     $(':checkbox', this).trigger('click'); 
    } 
}); 

をこれはEvent binding on dynamically created elements?