動的に作成されたフォームからフォームを取得できません

Question

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... 

なぜこのようなことが起こりますか？私は経験豊かなプログラマーではありませんので、間違いをおかけして申し訳ありません。

Answer 1

純粋な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, function(n, 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/