1つのページ上の複数のデータテーブルが機能しない

Question

私は、私がやろうとしていることの可能な限り簡単な例として作成しました。つまり、ページ内にいくつかのデータテーブルを動的に生成します。ここ

はa link to jsfiddle exampleですが、私にもわかりやすくするために、ここでコアコードを投稿したい：私はここでやっている何

<div id="tables"></div> 

$(document).ready(function() 
{ 
    var data = [{"MessageId":"e5368264-dd06-403b-85cd-f82c1a0bd685","MessageNumber":"M54740"},{"MessageId":"f6130eb7-2980-4e19-8f4b-d16473add97b","MessageNumber":"M54584"}]; 

    for(var i = 0; i < 3; i++) 
    { 
     var tableCode = '<table id="table_' + i + '" class="display" cellspacing="0" width="100%"></table>'; 
     $('#tables').html($('#tables').html() + tableCode); 

     $('#table_' + i).DataTable 
     ({ 
      data: data, 
      columns: 
      [ 
       { data: 'MessageId', title: 'Id', "searchable": true }, 
       { data: 'MessageNumber', title: 'Number', "searchable": true } 
      ] 
     }); 
    } 
}); 

は私が動的にいくつかのDataTableを生成しています。残念ながら、基本的なイベント（検索やソートなど）は、最後に追加された1つのにのみ適用されることに気付きました。

私が間違っていると私を訂正しますが、これはjQueryイベントの問題を思い出させます。毎回すべてを動作させたいとき（特にイベントが割り当てられた後に生成されたhtml要素を意味します）コードのように：

$(document).on('change', '.search-select', function (event){ ... }); 

ではなく、疑問につながる

$('.search-select').change(function (event){ ... }); 

：私は運命とDataTableのは、単に動作しませんので、私だけで数行を編集して保存することができますよソースコード（これは膨大な量のt自分で書かれていない図書館を理解するためにはどうすればいいですか？）もっと簡単な解決法はありますか？例えば

Answer 1

Use .append() instead of .html() as $('#tables').html($('#tables').html() + tableCode); will remove events from earlier appended elements.

、document.body.innerHTML += '<br>' ==>document.body.innerHTML = (document.body.innerHTML + '<br>');は破壊されますと、再びコンテンツを再作成します。

利用$('#tables').append(tableCode);代わりの$('#tables').html($('#tables').html() + tableCode);

Updated fiddle

Answer 2

これを試してみてください：

トリガデータテーブルを一度コードのAlにdivを

を選択するために、属性セレクタを使用して文字列にHTMLを追加テーブルに追加します。

$(document).ready(function() 
{ 
     var data = [{"MessageId":"e5368264-dd06-403b-85cd-f82c1a0bd685","MessageNumber":"M54740"},{"MessageId":"f6130eb7-2980-4e19-8f4b-d16473add97b","MessageNumber":"M54584"}]; 


     var tableCode =''; 
     for(var i = 0; i < 3; i++) 
    { 
     tableCode += '<table id="table_' + i + '" class="display" cellspacing="0" width="100%"></table>'; 


    } 
    $('#tables').html(tableCode); 
     $('table[id^="table_"]').DataTable 
     ({ 
      data: data, 
      columns: 
      [ 
        { data: 'MessageId', title: 'Id', "searchable": true }, 
        { data: 'MessageNumber', title: 'Number', "searchable": true } 
      ] 
     }); 
}); 

http://jsfiddle.net/9jnsvam6/1/

Answer 3

あなたが持っていることを確認しますとタグあなたが取得するテーブルまたは - キャッチされない例外TypeError：すごいああ未定義