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>

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

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

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

编辑: 我现在已经包含了一个JSFiddle,但是,我不知道如何使用ajax测试回声的东西.

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>

这样做工作正常,每次提交页面发布到自己,然后在响应中搜索输入并将输入放入表单输入目录.