1

我有桌子，我需要改变其中的一些东西。我想通过ajax来做到这一点：用户点击“更改”按钮，一些字段转换为可编辑，然后用户可以保存它。代码很简单：

$(".edit_button").click(function(event){
    event.preventDefault();
    var trContainer = $(this).closest('tr');
    trContainer.replaceWith(content);
});

在原始代码中，我通过 $.GET 下载页面，然后将其存储在“内容”变量中。结构是（简化的）：

<tr>
<form>
<td></td> // -- note, <td> are inside of <form>
<td></td>
</form>
</tr>

所以，我希望表格行会改变。而且它正在改变！......但问题是，加载元素的 DOM 被破坏了。一切都脱离了形式标签。我使用 Google Chrome 控制台观看 DOM，我看到替换的 DOM 看起来像（简化）

<tr>
<form></form> // -- here, why <form> is empty?
<td></td>
<td></td>
</tr>

所以，我的输入标签没有包装在表单中。

我建立了简约的例子，检查一下。单击“更改”，然后观察 DOM 并将其与内容字符串进行比较。

http://jsfiddle.net/Es8fQ/3/

4

1 回答 1

6

您正在附加无效的 HTML。

TD 元素只能在表格内，不能是表单元素的直接子元素，因此浏览器会自动关闭表单标签以尝试修复您所犯的错误。

解决方案是在附加之前确保您的 HTML 有效。

于 2013-03-26T16:41:30.520 回答