Javascript jquery.serialize（）在动态加载的表单上不起作用

我有一个表单，它是通过图像点击触发的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>

这在第一次提交时效果很好，但在第二次提交时，尽管用户重新填充输入，var序列化表单最终还是作为空字符串结束

编辑：

---

我现在已经包括了一个，但是，我不知道如何使用ajax测试echo东西。

那么，我想在ajax请求时，完整的表单会被更新的HTML替换？在这种情况下，您可以重新加载表单所在的整个div，以便在重新加载表单时再次绑定事件处理程序。例如：

<div id="myFormDiv">
     <form id="myForm" onsubmit="myAjaxCall(this)">
     <!-- inputs-->
     </form>
     <img onclick="$('#myForm').submit()"/>
</div>

<!-- javascript-->
function myAjaxCall(form){
     serializedForm = $(form).serialize();
     $('#myFormDiv').load('/submitpage.php'),{formdata:serializedForm}, function(data)(){});
}

函数myAjaxCall（表单）{
serializedForm=$（form）.serialize（）；
$（'#myFormDiv'）.load（'/submitpage.php'），{formdata:serializedForm}，函数（data）（{}）；
}

或者，当然，若你们说这不是在提交时完成的，你们可以这样做

---

如果'type=“text”后面缺少的双引号不仅仅是文章中的输入错误，而且是服务器响应中的实际HTML（虽然不是初始页面HTML，因为第一次调用serialize（）似乎有效），那么这可能是导致问题的原因


添加了双引号：



没有它：


（请参阅console，它发送的是“fred+value%3D=”而不是“fred=”）
您能检查返回的响应吗？因为我认为这是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>


$（'input#my form submit'）。在（'click'，函数（e）{
var data=$（'form#myForm'）.serialize（）；
$.post（'/test.php'，数据，函数（响应）{
$（'div#inputs'）.html（$（response.find（'div#inputs'））；
});
});

这很好，每次在提交页面上发布自己的帖子，然后作为回应，搜索输入并将输入放到表单输入目录中。
作为旁白，但尽管我已经看过JSFIDLE几次，但不知道它是什么，但我还是按照链接进行了操作，哇，这是一个多么棒的开发辅助工具！我肯定会将它添加到我的工具箱中

我修改了代码，将另一个文本输入字段动态添加到表单中，每次单击submit按钮，您都会得到另一个动态添加的输入（具有动态名称'name'和id），并且警报会报告表单中的所有命名元素

我不知道您需要为要序列化的项定义name属性

这是我的小提琴：

在aspx页面中：

<form id="myForm" action="">
<div id="myQuestions">
    <input type="text" name="entryOne"/>
</div>






单击徽标以提交表单

在启用JQuery的JavaScript中：

var counter = 0;

$(function(){
    $("#submitImage").click(function(){
        startAjaxFormSubmit();
    });
    //there is also another even that calls startAjaxFormSubmit
});


function startAjaxFormSubmit() {
    alert("startAjaxFormSubmit");
    var serializedForm = $("#myForm").serialize();
    alert("serializedForm is:\n=====\n"+serializedForm +"\n=====");

    $.post("/echo/html", serializedForm, function(data) {
        //do something with the data
        $("#myQuestions").append(data);

    });

    var div = $("#myQuestions");
    var $dynalabel = $('<br/>"<label>').text("Dynamic Input " + counter + ": ");
    div.append($dynalabel);
    var $dynaInput = $('<input type="text" name="dynaName_' + counter + '" id="id_' + counter + '"/>');
    div.append($dynaInput);
    counter++;
}

var计数器=0；
$（函数（）{
$（“#submitImage”）。单击（函数（）{
startAjaxFormSubmit（）；
});
//还有另一个甚至调用startAjaxFormSubmit的
});
函数startAjaxFormSubmit（）{
警报（“startAjaxFormSubmit”）；
var serializedForm=$（“#myForm”）.serialize（）；
警报（“serializedForm为：\n===\n”+serializedForm+“\n==”；
$.post（“/echo/html”），序列化格式，函数（数据）{
//对数据做点什么
$（“#我的问题”）。追加（数据）；
});
var div=$（“我的问题”）；
var$dynalabel=$（'
“）.text（“动态输入”+计数器+：”）；
div.append（$dynalabel）；
变量$dynaInput=$（''）；
div.append（$dynaInput）；
计数器++；
}
我遇到了同样的问题，通过调用“remove”和“appendTo”修复了它

如何重新填充输入？动态加载表单意味着动态创建或完成？@Rolice行$（“#myFormQuestions”）.html（数据）；是的。从ajax调用的响应来看。通过这种方法，DOM可能不会受到影响，序列化也不起作用。请参阅jQuery.add（）和.append（）方法。我希望缺少的双引号是一个输入错误：
我考虑过这一点，但在提交时没有完成。单击imagen会导致ajax调用启动。很抱歉，我现在必须离开，我回家后会发布完整的awnser。我已经更新了awnser，很抱歉我昨天无法更新它。jquery.load执行ajax调用，并在指定加载的对象中返回结果。例如：
$（'#div'）.load（'page.php'）
和您的php文件：
echo'hello world'
将返回：
hello world
这似乎在一个参数中传递所有数据。这意味着我的服务器端代码不起作用。不，对不起，这只是一个输入错误。是的。我还认为它可能是无效的html。我通过解析器运行了它，没有任何东西会影响jquery（主要是缺少alt等）。不幸的是，我不能发布真正的代码，我的雇主可能不喜欢。在我了解ajax测试内容如何在JSFIDLE上工作之后，我将尝试让它正确演示。您是否尝试过修改选择器？我已经测试了我的示例，它运行得很好。另外，请查看绑定事件处理程序，当您有动态html加载时，请使用
.live（'event'，function（e））
where
event
单击或任何事件。对不起。你的回答是正确的。我忽略了回答。它返回时包含了表单标签，因此我有两个表单，它们彼此内部有相同的名称。我使用.find只添加所需内容，这解决了问题。谢谢你的帮助。在当前jquery版本中，..live（）现在被.on（）所取代（更新仅供参考：）
var counter = 0;

$(function(){
    $("#submitImage").click(function(){
        startAjaxFormSubmit();
    });
    //there is also another even that calls startAjaxFormSubmit
});


function startAjaxFormSubmit() {
    alert("startAjaxFormSubmit");
    var serializedForm = $("#myForm").serialize();
    alert("serializedForm is:\n=====\n"+serializedForm +"\n=====");

    $.post("/echo/html", serializedForm, function(data) {
        //do something with the data
        $("#myQuestions").append(data);

    });

    var div = $("#myQuestions");
    var $dynalabel = $('<br/>"<label>').text("Dynamic Input " + counter + ": ");
    div.append($dynalabel);
    var $dynaInput = $('<input type="text" name="dynaName_' + counter + '" id="id_' + counter + '"/>');
    div.append($dynaInput);
    counter++;
}

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