javascript - jQuery 错误 : replaceWIth/html mangles my DOM (all tags go out of form tag)

Question

我有表格，我需要更改其中的内容。我想通过ajax来做到这一点:用户点击“更改”按钮，一些字段转换为可编辑的，然后用户可以保存它。代码非常简单:

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

在原始代码中，我通过 $.GET 下载页面，然后将其存储在“content”变量中。结构是(简化):

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

Answer 1

您附加的 HTML 无效。

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

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