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有效。

jQuery bug：replaceWIth / html破坏了我的DOM（所有标签都超出了表单标签）

1 个答案: