jQuery serializeArray 没有获取动态创建的表单元素

Posted 2023-03-05

【中文标题】jQuery serializeArray 没有获取动态创建的表单元素

【英文标题】：jQuery serializeArray not picking up dynamically created form elements

【发布时间】：2011-04-07 06:49:26

【问题描述】：

我有一个使用 ajax 动态创建的表单（因为表单元素的数据必须来自数据库），我想序列化表单的元素以通过 ajax 提交。我目前只是使用 jQuery 网站上的代码测试我的理论，看看我是否可以获取表单元素，这就是问题所在：

$(document).ready(function() 
    $('#btnCustomSearch').live('click', function() 
            $('#results').html('');
            alert($('#customSearchTable :input').serializeArray());
            // get all the inputs into an array.
            var fields = $('#customSearchTable :input').serializeArray();
            jQuery.each(fields, function(i, field) 
                $("#results").append(field.name + " = " + field.value + ", ");
            );

            // now we'll reformat the data as we need

            // here we'll send the data via ajax

    );
);

我需要在提交之前对数据进行一些更改，此代码尚未编写，但我发现页面加载时存在的页面上的任何输入元素都被正确拾取，任何使用 javascript 填充的元素被正确拾取，但任何使用 ajax 创建的元素都会被忽略。

我知道这通常可以使用“live”解决，但我不清楚如何使用serializeArray() 解决此问题。使用 Ajax 将额外的表单元素添加到 #customSearchTable 中，这些是没有被拾取的。

任何帮助都非常感谢。

谢谢

【问题讨论】：

此方法不关心元素何时添加，似乎它们没有正确添加为表单元素，您可以发布该代码吗？例如，他们是否有 name 属性？

尼克，非常感谢，你是对的，动态生成的表单元素缺少 name 属性.... DOH！！！非常感谢！！

FML - 1 小时后：/

【参考方案1】：

对于认为这是一个“问题”的其他人，请注意，根据 Nick Craver 的上述评论，所需要的只是确保将“名称”属性附加到动态创建的新表单元素中。这解决了我的问题！非常感谢尼克！

【参考方案2】：

我将在这里对评论进行更多说明：

当您调用.serializeArray() 时，它就像<form> 提交一样循环，或者尽可能接近，以获取要提交的元素。关键部分is here：

.filter(function() 
  return this.name && !this.disabled &&
         (this.checked || rselectTextarea.test(this.nodeName) ||
         rinput.test(this.type));
)

正如<form> 提交不会包含没有name attribute 的元素，使用this.name 的.filter() 调用会将这些元素从要序列化的元素中过滤掉。

【讨论】：

谢谢尼克，希望为其他有同样问题的人澄清一下。

修复了将 <option /> 元素添加到已命名的 <select /> 的问题？

@Louis 你是什么意思？我不确定我是否遵循这里...任何带有value 属性的<option> 都会在此处序列化，如果它缺少value 属性，那么它将使用文本作为值（这是标准浏览器行为）。如果您有示例或需要更多信息，我很乐意回答...只需描述一下您所追求的内容。

@NickCraver 我正在模板中创建空的<select />s，并使用$('<option></option>').val(stringkey).html(stringkey).appendTo('#stringkeys'); 动态添加选项，当我在表单上调用.serialize() 时，所选选项不是如果有意义就返回？

@Louis .val() 在 <option> 元素上无效（它与设置值属性不同），仅在 <select> 上有效。您想在选项上设置value 属性，如下所示：$('<option/>', value : stringkey ).text(stringkey).appendTo('#stringkeys');