jQuery Datatable无法编辑新创建的行

Question

我目前使用jQuery数据表来创建我正在显示的表。目前，我已经设置了它，所以当我在表中选择一行时，该行中的文本出现在另一个面板的文本框中。然后，我可以输入其他内容并按下“保存”，它会更改该行中的文本。我目前的问题是，当我通过按钮添加一个新的行，我不能编辑新行中的文本，我可以选择它但是... 例如：我有3行，我选择Test1，我可以成功更改文本。然后单击添加行，然后选择新行并尝试更改该行中的文本，它会更改之前选定的行文本（加载时位于表中的行）。 我该如何解决这个问题？我查看了cell.data，cell.edit，但那是因为各种原因我目前没有使用的编辑器。

表：

<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> 

代码使所选行的文本出现在文本框：

(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]; 
     } 
    })(); 

更改选定行的文本：

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()); 
      } 
     }); 
    }); 

添加一行：

$("#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新增除非重新绑定处理程序，否则按钮将不起作用。

但是当我们使用。 对于与选择器匹配的所有元素，包括动态创建的元素，都有一个处理程序。

因此，我改变

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

到

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

解决我的问题。

Answer 2

为什么你在桌面点击时有这两个相互冲突的陈述？

1. 设置组名输入到第一列列用户只需点击

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

   这里，textbox.value = data[0]似乎'#groupname'输入字段的文本值被设置为刚刚点击任何行的第一列。

2. 设置输入到单元格中的文本，我们点击

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

这里，row.text($("#groupname").val());似乎'#groupname'输入字段的文本值被设置为我们所点击的确切列的文本。

顺便说一句，这里row是一个误导性的变量名称，因为实际的元素$(this)指的是任何td这是一个tr这是'#data-table'孩子的孩子。所以真的$(this)是一个列或表格单元格;称它为row令人困惑。