2016-08-11 21 views
4

各行のチェックボックスをDataTablesに追加しました。テーブルのデータがロードされると、私はこのような各チェックボックスに変更イベントをバインド:
各DataTables行のチェックボックスに変更イベントをバインドします

fnInitComplete: function(oSettings, json) { 

     $("input[type='checkbox']").on("change", function() { 

      // checking if any checkbox is checked 

     }); 
} 

問題は、変更イベントは最初のページのみのために追加されていることです。他のページに移動して任意のチェックボックスをクリックすると、イベントは発生しません。ページを更新する場合にのみ機能します。同じはShow entriesです。この問題に対処するための巧妙な方法は何でしょうか?

Table data

+0

あなたは再びそのイベントを発生、ためにそれが起こるようにする必要があります。またはこの関数をloadイベントに配置するかのいずれかです。 –

答えて

3

委任イベントを使用してみてください:

$("#table_id").on('change',"input[type='checkbox']",function(e){ 
    //your code 
}); 

これは、「変更」イベントがその子孫であるinput[type='checkbox']から発信時に指定された関数を実行するために、テーブルに指示します。

途中でテーブルの初期化にこのハンドラを登録する必要はありません。ドキュメントの準備ができたら、このハンドラを登録するだけで済みます。ページ変更で

More about delegated events

1

あなたはこの詳細な説明のためにここに.on('page.dt', function() { // do something})チェックthe linkあなたのコードを配置することもできますし、コードの下に周りにこのイベントを置くことができます。

$(function(){$("input[type='checkbox']").on("change", function() { 

      // checking if any checkbox is checked 

     });}) 
関連する問題