jquery .serialize() 不适用于动态加载的表单

Question

我有一个通过图像点击触发的ajax提交的表单，提交表单后返回并重新加载。但是 .serialize() 已停止工作。

这是一些代码：

 <form id="myForm" action="/someFormSubmitPage.do">
    <div id="myFormQuestions">
        <input type="text" name="fred"/>
        <!--more inputs-->
    </div>
 <img id="submitButton" src="some/path">
</form>

提交按钮的图像通过 .click 在 jquery 中触发以下函数

var serializedForm = $("#myForm").serialize();
$.post("/someFormSubmitPage.do", serializedForm, function( data ) {
    //do some stuff with the data
    $( "#myFormQuestions" ).html(data);
});

这在第一次提交时工作正常，但在第二次提交时，尽管用户重新填充了输入，var 序列化表单最终还是一个空字符串

编辑： 我现在已经包含了一个 JSFiddle ，但是，我不确定如何使用 ajax 测试回声。

原文由 Mark W 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你能看看返回了什么响应吗？因为我认为这是 DOM 元素识别的问题。问题可能是这样的：

你有两个元素匹配 $('#myForm') 选择器，jQuery 迷路了。尝试用 $('form#myForm') 修改这个选择器。尝试一下，然后在此处发布您的回应。

现在，我检查了它是否工作正常，代码是：

 <div>
    <form id="myForm">
        <div id="inputs">
            <input name="some" type="text" />
        </div>
        <input type="button" id="my-form-submit" value="submit" />
    </form>

</div>
<script type="text/javascript">
    $('input#my-form-submit').on('click', function(e) {
        var data = $('form#myForm').serialize();
        $.post('/test.php', data, function(response) {
            $('div#inputs').html($(response).find('div#inputs'));
        });
    });
</script>

这很好用，每次在提交页面上发布给自己，然后作为响应搜索输入并将输入放入表单输入目录。

原文由 devdRew 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我遇到了同样的问题并通过调用“remove”然后“appendTo”来修复它

var serializedForm = $ ("# myForm").serialize();
$ .post ("/someFormSubmitPage.do" serializedForm, function (data) {

     $ ("#myFormQuestions").remove();
     $ (data).appendTo('#myFormQuestions');
});

原文由 Brandao 发布，翻译遵循 CC BY-SA 3.0 许可协议