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

... 以及为更新绑定(bind)隐藏字段的 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 中的 View 不匹配。例如，标记完全相同，但行的顺序不同——看起来好像是按日期排列的。 (有一个日期字段，但我已经减少了这个例子的字段。)我认为这是导致问题的原因......问题是为什么？我该如何解决？

谢谢

更新

这是我在 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){
(...)