동적으로 생성 된 양식에서 양식을 가져올 수 없습니다.

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; 

}

기능이 잘 작동하는 것 같다 : I 양식에서 데이터를 가져 오는 기능을 가지고있다. 단추를 클릭하면 양식을 만들 수 있습니다.

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/