动态Javascript表单输入不发布

Question

我正在使用python-flask框架开发Web应用程序。

我遇到的麻烦是用户可以在其中创建新输入字段的表单上。 表单以HTML代码形式出现，并以可视方式出现在浏览器中，但是动态创建的元素不会出现在POST请求中。

以下是两个javascript函数，第一个在用户按下相应按钮时创建form元素。 我在网上找到的第二个代码，因为它说序列化会将动态表单元素添加到POST请求中。

$(function create_new_row_plus_button_fn() {
$("#addRows").click(function () {
            counter = counter + "a";
            var trelem = document.createElement('tr');
            var tdelem = document.createElement('td');
            trelem.appendChild(tdelem);
            var frm = document.getElementById("new_table_id");
            var newEl = document.createElement("input");
            newEl.name = counter;
            newEl.type = "text";
            tdelem.appendChild(newEl);
            frm.appendChild(trelem);
    });
})

$('#form_container').on('submit', function(e) {
    //prevent the default submithandling
    e.preventDefault();
    //send the data of 'this' (the matched form) to yourURL
    $.post('/add_new_product', $(this).serialize());
    location.reload();
});

我注意到的一件事是，如果我从chrome调试器中查看html，则动态表单元素是可见的，但是如果查看页面源，则看不到它们。

Answer 1

问题发生在元素内部。 将外部移动解决了该问题。