Ajax serialize() 不包含来自动态创建的 div 的数据答案

【问题标题】：Ajax serialize() doesn't include data from dynamically created divsAjax serialize() 不包含来自动态创建的 div 的数据
【发布时间】：2014-08-27 06:39:39
【问题描述】：

我有一个表单，我使用append() 在此处动态添加 div。它成功创建了 div，并且 div 内部有输入字段。但问题是，在序列化表单中的数据后，它不包括来自动态创建的 div 的数据。

这是我的createDiv 函数：

function createDiv() {
    var count = 5;
    for (var i = 0; i < count; i++) {
        $('#userQues').append("<div class='col-md-4'> <div class='form-group'> " +
            "<label class='control-label' for ='data[" + i + "][questiona]'> Question A </label>" +
            "<input id='data[" + i + "][questiona]' name='data[" + i + "][questiona]' type='text' placeholder='' class='form-control input-md'/>" +
            "</div> </div>");
    }
};

创建我的 div 有问题吗？为什么序列化不包含我创建的 div 中的数据？

提前致谢！

这里是序列化数据的地方。提交表单时：

$('#explorer_form').submit(function(e){
  var serializedData = $('#explorer_form').serialize();
  alert(serializedData);

  $.ajax({
    url : url + api,
    type : method,
    data : serializedData,
    success : function(response){
        $('#response').val(JSON.stringify(response));
    }
  });

  e.preventDefault(); //STOP default action
  e.unbind(); //unbind. to stop multiple form submit.
});

还有形式：

<form id='explorer_form'>
    <input id='uname' name='uname' type='text'/>
    <div id='userQues'></div>
    <button type='submit'>Submit</submit>
</form>

现在，警报数据只是来自输入“uname”的数据。它不会序列化创建的 div 中的数据。

【问题讨论】：

如何/何时调用序列化？你能重现这个问题吗？
我看不到您进行序列化的点。此外，做一个 fiidle 或 pen 也很聪明，因为它对喜欢帮助你的人来说更有趣:)
对这个
而非 div 使用隐藏字段

标签： javascript jquery html javascriptserializer

【解决方案1】：

确保您的 userQues 是一个表单，并且您在添加输入后执行序列化。您的代码在这里有效：http://jsfiddle.net/9v3khbts/

HTML

<form id="userQues">
</form>

<button id="doSer">Serialize</button>

$(document).ready(function(){
  function createDiv() {
    var count = 5;
    for (var i = 0; i < count; i++) {
        $('#userQues').append("<div class='col-md-4'> <div class='form-group'> " +
            "<label class='control-label' for ='data[" + i + "][questiona]'> Question A </label>" +
            "<input id='data[" + i + "][questiona]' name='data[" + i + "][questiona]' type='text' placeholder='' class='form-control input-md'/>" +
            "</div> </div>");
    }
};

    createDiv();
    $('#doSer').click(function(){
        alert($('#userQues').serialize())
    })

});

【讨论】：

没有。我正在序列化“explorer_form”而不是“userQues”本身。因为“userQues”是我添加一些 div 的 div。
在您的提交按钮上执行 e.preventDefault()，数据正在正确序列化，您只是看不到它。在这里，我更新了小提琴：jsfiddle.net/9v3khbts/1
是的，在 jsfiddle 中测试后，它似乎工作正常。但我仍然无法找出为什么在我的代码中，它不包括数据。也许我的原始代码有一些错误。

【解决方案2】：

<html>
<body>
<form id='explorer_form'>
    <input id='uname' name='uname' type='text'/>
    <div id='userQues'></div>
    <button type='submit'>Submit</button>
</form>

<div class="output"></div>
<script src="jquery.js"></script>
<script>
function createDiv () {
    var count = 5;
    for(var i=0; i<count; i++){
        $('#userQues').append("<div class='col-md-4'> <div class='form-group'> " + 
            "<label class='control-label' for ='data[" + i + "][questiona]'> Question A </label>" +
              // "<input id='data[" + i + "][questiona]' name='data[" + i + "][questiona]' type='text' placeholder='' class='form-control input-md'/>" +
            "<input id=data["+ i +"][questiona] name=data"+i+" type='text' placeholder='' class='form-control input-md'/>" +
            "</div> </div>"                   
        );
    }
};
createDiv();

$('#explorer_form').submit(function(e){
e.preventDefault();
    $(".output").text($("#explorer_form").serialize());
});
</script>
</body>
</html>

这对我来说很好。

请勿在 ID 或名称中使用 []。

输出将是 -

【讨论】：

【解决方案3】：

您可以使用 .appendTo() https://api.jquery.com/appendTo/ 代替 .append()

【讨论】：