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

为什么你在点击表格时会有这两个冲突的语句？

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 令人困惑。

Answer 2

正如 andreister 所说的here，当我们使用 .click 时，会为每个匹配选择器的元素创建一个单独的处理程序。这意味着

1. 许多匹配的元素会创建许多相同的处理程序，从而增加内存占用
2. 动态添加的项目将没有处理程序 - 即，在上面的 html 中新添加的“警报！”除非您重新绑定处理程序，否则按钮将不起作用。

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

所以我改变了

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

到

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

解决我的问题。