在ajax更新后，无法使用jquery选择表行id

Question

我有一个包含数据行的html表。我正在使用AJAX为表格构建添加/编辑/删除功能。

我的表格行的格式如下：

<tr id="281"><td class="todo-task">fdgdg</td><td>some more data</td><td>EDIT BUTTON</td></tr>

目前我有一个有效的AJAX功能，可以添加新行并通过prepend()编辑一行。

要编辑表格行，请单击编辑按钮，将值拉入表单并提交...简单到目前为止。这是编辑点击和表单标记的代码。请注意，编辑点击中的ID会进入表单中的隐藏字段。

$("button.edit-todo").bind("click", function(){
var task = $(this).closest('tr').children('td.todo-task').text();
var todoID = $(this).closest('tr').attr("id");

$("div#todo-form input.todo-task").val(task);
$("div#todo-form input.key").val(todoID);
});

...

<form id="mgnt-edit-todo-form" class="record-edit-form">
 <input type="text" class="todo-task input" name="task">
 <input class="key" name="key" type="hidden" value="279">
 <button class="update uk-button uk-modal-close" type="submit">Save</button>
</form>

...和ajax位绑定隐藏字段以进行更新。

$("button.update").bind("click", function(e){
var key = $(this).closest('.key').attr('value');
$.ajax({
  type: "POST",
  url: "update-record.php",
//etc etc etc

问题

第一次更新工作正常，它将添加一个包含id的表行。当我希望对同一“前置”行进行进一步更新时，会出现此问题。虽然DOM显示标记正确，但button.edit-todo上的函数将不再获取id。查看DOM中的表单标记时，隐藏字段的值为空。

我查看了Chrome中的来源，我发现它与浏览器/ DOM中的视图不匹配。例如，标记是完全相同的，但行已被放入不同的顺序 - 看起来好像按日期。 （有一个日期字段，但我已经减少了这个例子的字段..）我认为这是导致问题...问题是为什么？以及如何解决它？

由于

更新

这是我在DOM中的标记，看起来很好。

要完全清楚，单击编辑按钮时会出现问题。

它调用以下函数（现在使用'on'：

$("button.edit-todo").on("click", function(){
//load the data from this row
var task = $(this).closest('tr').children('td.todo-task').text();
var client = $(this).closest('tr').children('td.todo-client').text();
var due = $(this).closest('tr').children('td.todo-due').text();
var todoid = $(this).closest('tr').attr('id');

$("div#todo-form input.todo-task").val(task);
$("div#todo-form select").val(client);
$("div#todo-form input.todo-due").val(due);
$("div#todo-form input.key").val(todoid);
});

单击第286行按预期工作（它出现在页面加载中），因为tr id被添加到表单中的隐藏字段。单击第297行（据我所知在DOM中？）不会将id传递给隐藏字段......

请帮忙!!!尽我所能......！

Answer 1

而不是.bind使用.on：

$("button.edit-todo").on("click", function(){
(...)

和

$("button.update").on("click", function(e){
(...)

Answer 2

使用ID加载数据不再是一种非常舒适的方式。使用class而不是ID。

此外，jQuery已将“bind”更改为“on”方法。我建议使用“on”。

例如：

$(document).on("click", ".edit-todo", function(){
   var task = $(this).closest('tr').children('.todo-task').text();
   var todoID = $(this).closest('tr').attr("id");

   $(".todo-form .todo-task").val(task);
   $(".todo-form .key").val(todoID);
});

此外，source显示文档加载时的代码，而不是动态DOM。