jQuery serializeArray没有选择动态创建的表单元素 [英] jQuery serializeArray not picking up dynamically created form elements

问题描述

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

（$'code> $（document）.ready（function（）{
 $（'＃btnCustomSearch'）。live（'click'，function（）{
 $（'＃results' ）.html（''）; 
 alert（$（'＃customSearchTable：input'）。serializeArray（））; 
 //获取数组中的所有输入
 var fields = $（'＃customSearchTable：input'）。serializeArray（）; 
 jQuery.each（fields，function（i，field）{
 $（＃results）。append（field.name + =+ field.value +，）; 
}）; 
 
 //现在我们将重新格式化数据，因为我们需要
 
 //这里我们将通过ajax 
 
}）; 
}）发送数据; 
  

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

我知道这通常是使用live解决的，但我不清楚如何使用 serializeArray（）。使用Ajax额外的表单元素被添加到 #customSearchTable 中，这些是没有被拾取的。

任何帮助非常感谢。

谢谢

当你打电话给时， api.jquery.com/serializeArray/rel =noreferrer> .serializeArray（） 它循环遍历，就像<表单> 提交将尽可能接近，以获取要提交的元素。关键部分在这里：

  .filter（function（）{
 return this.name&&！this.disabled&& 
 （this.checked || rselectTextarea.test（this.nodeName）|| 
 rinput.test（this.type））; 
}）
  

就像< form> submit不包含没有 name 属性， .filter（） 使用 this.name 会过滤那些元素以进行序列化。

I've got a form that's dynamically created using ajax (as data for the form elements has to come from a database) and I want to serialize the elements of the form to submit by ajax. I'm currently just testing my theory using code from the jQuery website just to see if I can pick up the form elements and this is where the problem lies:

$(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

    });
});

I need to make some changes to the data prior to submission and this code is not written yet, but what I'm finding is that any input elements on the page that existed at time of page loading are picked up correct, any elements that are populated using Javascript are picked up correctly, but any created using ajax are ignored.

I know this is normally resolved using "live", but I'm unclear as to how to resolve this with serializeArray(). Using Ajax additional form elements are added to the #customSearchTable and these are the ones not being picked up.

Any help great appreciated.

Thanks

解决方案

I'll expound upon the comment a bit more here:

When you call .serializeArray() it's looping through just as a <form> submission would or as close as possible anyway, to get the elements to be submitted. The key part is here:

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

Just as a <form> submit wouldn't include elements without a name attribute, the .filter() call using this.name will filter those elements out of ones to be serialized.

这篇关于jQuery serializeArray没有选择动态创建的表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！