使用 jQuery ajax 时 Chrome 会删除表单元素答案

【问题标题】：Chrome removes form element when using jQuery ajax使用 jQuery ajax 时 Chrome 会删除表单元素
【发布时间】：2013-02-10 19:05:37
【问题描述】：

我在一个动作的 JSON 响应中返回了一些简单的 HTML 标记。

这是完整的响应（为便于阅读添加了换行符）：

    {
        "Success":true,
        "Content":"\r\n
<div class=\"editor-form\">\r\n

<form action=\"/Blah/Blah/5104?id=9\" method=\"post\">

<input data-val=\"true\" data-val-number=\"The field Id must be a number.\" data-val-required=\"The Id field is required.\" id=\"Id\" name=\"Id\" type=\"hidden\" value=\"5104\" />

<input data-val=\"true\" data-val-number=\"The field Vat Rate must be a number.\" data-val-required=\"The Vat Rate field is required.\" id=\"VatRate\" name=\"VatRate\" type=\"hidden\" value=\"1.2000\" />

<div class=\"display-field\">\r\n\t

<label for=\"Price\">Price (Ex-VAT)</label>\r\n\t

<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field Price must be a number.\" data-val-required=\"The Price field is required.\" id=\"Price\" name=\"Price\" type=\"text\" value=\"92.50\" />\r\n\t

</div>\r\n

</form>
</div>",
"Data":null,
"Errors":null
}

这是我在成功响应后的处理方式：

$("#EditPriceDialog").html(data.Content).dialog(MyProject.UI.DialogOptions({ minWidth:380, minHeight:200, modal:true }))

当标记呈现时，表单元素丢失。表单内的元素仍然存在。这只发生在 Chrome 中。在 IE9 和 FF 19 中，表单元素就在那里。 Chrome 有什么不同？

【问题讨论】：

我无法复制它
你能给我们一些可以重现问题的东西吗？
这是一个相当大的页面，但我会尝试......
也发生在我身上，但如果我有输入 type=text with name and id = Date 它不会删除表单

标签： html asp.net-mvc google-chrome jquery

【解决方案1】：

如果表单元素已经被另一个表单元素包围，Chrome 会删除它。此外，ASP .Net 为其服务器的所有页面呈现表单标记，因此 Chrome 剥离了 data.Content 中的表单标记。我不认为 IE 或 firefox 有这种行为。

编辑：希望你会觉得这很有用，How do you overcome the html form nesting limitation?

【讨论】：

我遇到了这个问题，它是由页面上方未关闭的表单标签引起的。