javascript – 无法从动态创建的表单中获取表单

我有一个按钮,使表单出现在我的html页面中.我有一个从表单获取数据的函数：

function getFormData($form){

   var unindexed_array = $form.serializeArray();

   var indexed_array = {};

   $.map(unindexed_array,function(n,i){

      indexed_array[n['name']] = n['value'];

   });

   return indexed_array;

}

该函数似乎运行良好,因为我可以从其他非动态创建的表单中获取数据.我通过单击按钮以这种方式创建我的表单：

var new_form = document.createElement('form');
new_form.id = "new_form";

// (...) all the inputs for the form

// and I append to an existent div 
existent_div.appendChild(new_form);
// and then the inputs
new_form.appendChild(input1); (...)

我有另一个按钮,应该负责获取表单数据.它调用这个函数,在函数中间我有这个：

var new_form_info = getFormData($("#new_form"));
// I get an empty object...

为什么会这样？我不是一个经验丰富的程序员,对任何错误都很抱歉……

解决方法

你有理由使用纯js和jquery的组合吗？ JQuery表单创建可以帮助您.

var new_form = $('<form></form>')
        .attr('id',"new_form")
        .append('<input type="text" value="1" name="inp" />');    
$('#existent_div').append(new_form);
console.log($('#new_form').serializeArray());

https://jsfiddle.net/yej5xc8s/

更新

如果您附加输入并定义existent_div,混合也会起作用

function getFormData($form){
   var unindexed_array = $form.serializeArray();
   var indexed_array = {};
   $.map(unindexed_array,i){
      indexed_array[n['name']] = n['value'];
   });

   return indexed_array;
}

var new_form = document.createElement('form');
new_form.id = "new_form";
var input = document.createElement('input');
input.name = "qwer";
input.value = "1";
new_form.appendChild(input);

var existent_div = document.getElementById('existent_div');
existent_div.appendChild(new_form);

console.log(getFormData($("#new_form")));

https://jsfiddle.net/yej5xc8s/1/