Javascript jQuery Datatable无法编辑新创建的行

我目前正在使用jquerydatatables生成我正在显示的表。目前我已经设置好了，所以当我在表格中选择一行时，该行中的文本将显示在另一个面板的文本框中。然后我可以键入其他内容，然后按Save，它会更改该行中的文本。我当前的问题是，当我通过按钮添加新行时，我无法编辑新行中的文本，但我可以选择它。。。 示例：我有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>

更改选定行的文本：

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

---

为什么在单击表上有这两个相互冲突的语句

将groupname输入设置为用户刚刚单击的行中的第一列

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所指的实际元素是任何td，它是tr的子元素，tr是“数据表”的子元素。这是一个列或表单元格；调用它是一种混乱。

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

许多匹配的元素将创建许多相同的处理程序，从而增加内存占用 动态添加的项目将不会有处理程序-即，在上面的html中，新添加的警报！除非重新绑定处理程序，否则按钮将无法工作。 但当我们使用.on时， 对于与选择器匹配的所有元素，包括动态创建的元素，都有一个单独的处理程序

所以我改变了

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

到

---

来解决我的问题。

我认为您的问题是ID重复。html文档中只能有一个id实例。它编辑前一行的文本的原因是，您正在按id选择几乎所有内容，并且它只会在页面上找到第一个结果。所选标记将添加到类标记中。我可以成功地更改编码到html中的所有3行的文本，但一旦添加新行，我就无法更改该行的文本。不过我仍然可以更改所有其他行文本。谢谢你的评论，我对编码还是相当陌生，错过了这里的冲突。我去掉了函数onTableClick e{…textbox.value=data[0]；…}代码。虽然我仍在思考如何实现我的最初目标，但DataTables的row.add是否真的添加了td？看见看起来它可能只是添加了一个tr。在这种情况下，$data table tr td.clickfunction。。不会为新添加的行运行，对吗？请查看并更新您的答案以提供更多详细信息。具体地说，如果您解释一下这是如何解决问题的，那将非常有帮助-

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

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