jQuery bug:replaceWIth/html破坏了我的DOM(所有标签都超出了表单标签)

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被破坏了.一切都抛出了表单标签.我使用谷歌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之前确保您的HTML有效.