2

我有一个包含数据行的 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 传递给隐藏字段...

请帮忙！！！做我的头......！

4

2 回答 2

1

Using ID for loaded data is not very comfortable way anymore. Use class instead of ID.

Also jQuery has changed "bind" to "on" method. I recommend to use "on".

For example:

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

Also, source shows the code when the document loads, not the dynamic DOM.

于 2013-11-11T23:30:56.330 回答
1

而不是.bind使用.on：

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

和

$("button.update").on("click", function(e){
(...)
于 2013-11-11T23:28:30.010 回答