jquery - $.seralize() 识别 jQuery UI 对话框中的表单元素变化

Question

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

请参阅我的jsfiddle示例。

Answer 1

当您使用 jQuery UI 对话框时，它实际上会再次包装您的 $('#myForm') 并将其直接移动到关卡下方。

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

您可以绑定回调或制作另一种形式并获得这样的序列化字符串；

$('#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。