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

使用.on代替.bind :

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

和

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