jQuery Datatableは新しく作成された行を編集できません

Question

現在表示しているテーブルを作成するためにjQueryデータ型を使用しています。現在、私はそれを設定しているので、テーブルの行を選択すると、その行のテキストが別のパネルのテキストボックスに表示されます。次に、何かを入力して「保存」を押すと、その行のテキストが変更されます。私の現在の問題は、ボタンを使って新しい行を追加したときに、新しい行のテキストを編集できなくても、選択することができます。 例：3行あり、Test1を選択しています。 。次にAdd Rowをクリックして、新しい行を選択し、その行のテキストを変更しようとすると、以前に選択された行のテキスト（読み込み時にテーブル内にある行）が変更されます。 この問題を解決するにはどうすればよいですか？私はcell.data、cell.editを見てきましたが、それは私が現在さまざまな理由で使用していないエディタ用です。

表：

：行を追加します

var row = null; 

    $("#data-table tr td").click(function() { 
     $("#groupname").val($(this).text()); 
     row = $(this); 


     $("#saverow").click(function() { 
      if (row != null) { 
      row.text($("#groupname").val()); 
      } 
     }); 
    }); 

：選択した行のテキストを変更する

(function() { 

     var table = document.querySelector('#data-table'); 
     var textbox = document.querySelector('#groupname'); 

     table.addEventListener('click', onTableClick); 

     function onTableClick (e) { 
     var tr = e.target.parentElement; 

     var data = []; 
     for (var td of tr.children) { 
      data.push(td.innerHTML); 
     } 
     textbox.value = data[0]; 
     } 
    })(); 

：選択した行のテキストがテキストボックスに表示させるための

<div class="panel-body"> 
       <table id="data-table" class="table table-striped table-bordered nowrap" width="100%"> 
        <thead> 
         <tr> 
          <th>Name</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="odd"> 
          <td>All</td> 
         </tr> 
         <tr class="even"> 
          <td>Test1</td> 
         </tr> 
         <tr class="odd"> 
          <td>Test2</td> 
         </tr> 
        </tbody> 
       </table> 
       <div class="col-md-8 col-md-offset-1"> 
        <button type="submit" class="btn btn-sm btn-primary m-r-5" id="addbtn" >New Group</button> 
       </div> 
      </div> 
//Text box 
<div class="form-group"> 
       <label class="col-md-4 control-label">Group Name:</label> 
        <div class="col-md-8"> 
         <input type="text" id="groupname" class="form-control" value="Name"/> 
        </div> 
      </div> 

コード

$("#addbtn").click(function() { 
    var t = $('#data-table').DataTable(); 

$('#data-table').dataTable(); 
    t.row.add([ 
     "New Group" 
    ]).draw(false); 
}); 

Answer 1

hereと同様に、andreisterによって、.clickを使用すると、セレクタに一致するすべての要素に対して別のハンドラが作成されます。それは

1. 多くのマッチング要素が動的に追加された項目は、ハンドラを持っていない多くの同一のハンドラを作成し、これ
2. メモリフットプリントを増加させる意味 - 「！アラート」、すなわち、上記のhtml新しく追加されたにハンドラを再バインドしない限り、ボタンは機能しません。

しかし、私たちが使うとき。on、 動的に作成された要素を含め、セレクタに一致するすべての要素に対して単一のハンドラがあります。

だから、私は問題を解決するために

$("#data-table").on('click', 'td', function() { 

に

$("#data-table tr td").click(function() { 

を変更しました。

Answer 2

なぜこれらの2つの矛盾するステートメントがテーブルクリックでありますか？行のユーザーの最初の列に

1. セットグループ名の入力だけでここ

   function onTableClick (e) { 
       ... 
       textbox.value = data[0]; 
       ... 
   } 
   

   をクリックし、textbox.value = data[0]だけクリックされてしまったものは何でも、行の最初の列に'#groupname'入力フィールドのテキスト値を設定しているようです。我々はここで

   $("#data-table tr td").click(function() { 
       ... 
       row.text($("#groupname").val()); 
       ... 
   }); 
   

をクリックしたセルのテキストに

セット入力、row.text($("#groupname").val());は、私たちがクリックした正確な列のテキストに'#groupname'入力フィールドのテキスト値を設定しているようです。 $(this)が参照している実際の要素が'#data-table'の子であるtrの子である任意のtdあるので、ここでちなみに

、rowは誤解を招く変数名です。したがって、実際には$(this)は列または表のセルです。それをrowと呼ぶのは混乱します。