$ .serialize（）识别jQuery UI对话框中的表单元素更改

Question

我使用$('#myForm').seralize()通过$.ajax()将参数传递给服务器端组件但是，当我将任何表单元素包含到jqueryui对话框使用的div中时，$('#myForm').seralize()不会识别该div中的任何表单元素更改。

请参阅我的jsfiddle示例。

Answer 1

当你使用jQuery UI对话框时，它实际上再次包装你的$（'＃myForm'）并直接在该级别下移动它。

您可以在对话框中通过firebug / chrome devtool执行“检查元素”，您将发现对话框元素不再属于表单元素，因此缺少复选框数据。

您可以绑定回调或创建另一个表单并获得这样的seralized字符串;

$('#form_1').serialize() + '&' + $('#form_2').serialize();

希望它有所帮助，干杯。

Answer 2

jQuery UI对话框放置在body标签的开头或结尾（我忘了哪个），这意味着这些元素不再是表单的一部分。如果您使用的是HTML5，则可以通过为这些输入提供新属性来解决此问题：form="myForm"

演示：http://jsfiddle.net/vXLve/7/

Answer 3

这是因为$('#dialog').dialog()将#dialog移出#myform <div>，将其完全克隆到另一个位置（我相信页面的底部）。

您可以使用以下方法在对话框中找到输入：

$('#dialog :input').serialize();

也许您可以将这两组分开并将它们一起发送回服务器：

...
data: { 
    common: $('#myForm').serialize(),
    dialog: $('#dialog :input').serialize();
},
...

或许你可以把它们组合起来，就像这样：

...
data: $('#myForm').serialize() + '&' + $('#dialog :input').serialize(),
...

更新后的jsFiddle。