使用jQueryAjax提交表单会导致多个请求（和提交）

我在JQuery表单提交中遇到了一个问题，在任何地方都没有找到答案。如果有人能解释这一点，我们将不胜感激

问题：我第一次提交表单时，它工作得很好。但是如果我第二次提交相同的表单，它会发送2个请求，第三次发送3个请求，以此类推。

脚本：

    function postInvokeFunctionForm(functionId){
      var formId = "#"+functionId+"-form";
      var formUrl = "invokeFunction.html?functionId="+functionId
      $(formId).submit(
        function(){
            $.ajax({
                type: 'POST',
                url: formUrl,
                data: $(formId).serialize(),
                success: function (data){
                 alert('successfully invoked function!' + data);
                }
            });
            return false;
           }
        );
   }

动态生成的表单：

<form action="" method="post" id="xxxxx-form" class="invokeFunctionForm">
<input name="functionId" value="xxxxx" readonly="readonly" style="visibility: hidden;" type="text">
<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="submit">
</form>

这显然是不可取的。我能想到的唯一解决方案是，在提交表单后重新呈现（动态生成的）表单，但这将是一个昂贵的操作

这是jQueryAjax提交中的一个已知问题，还是我遗漏了一些明显的东西？是否存在某种形式的递归

---

谢谢

每次单击按钮时，代码都在调用函数。在该函数中，行

$（formId）.submit（…）正在将事件绑定到表单的提交操作。每次单击时都会发生这种情况，将多个“提交”事件添加到表单中。你需要先采取行动。因此您可以调用
$（formId）.unbind（'submit'）.submit（…）。
更改

<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="submit">



到



是导致双重提交的原因。
当您执行此操作时

$(formId).submit(function(){})

您正在将函数添加到
submit
事件中。
当您点击
submit
按钮时，您正在添加一个this
功能
，并通过
input type=“submit”
的默认行为进行提交。再次单击时，您会将相同的
功能
添加到
提交
事件中。因此，当您单击一次时，在
submit
事件中有一个
函数
，当您单击两次时，有两个
函数

也就是说，你可以这样做：

$('#inputInvokeId').submit(function(){
var formUrl = "invokeFunction.html?functionId="+inputInvokeId;
$.ajax({
                type: 'POST',
                url: formUrl,
                data: $(formId).serialize(),
                success: function (data){
                 alert('successfully invoked function!' + data);
                }
            });
            return false;
           }

})

<form action="" method="post" id="xxxxx-form" class="invokeFunctionForm">
<input name="functionId" value="xxxxx" readonly="readonly" style="visibility: hidden;" type="text">
<input value="Invoke" id="inputInvokeId" type="submit">
</form>

$（'#inputInvokeId'）。提交（函数（）{
var formUrl=“invokeFunction.html？functionId=“+inputInvokeId；
$.ajax({
键入：“POST”，
url:formUrl，
数据：$（formId）.serialize（），
成功：功能（数据）{
警报（“成功调用函数！”+数据）；
}
});
返回false；
}
})
如果您每次都有两次提交，这可能是原因，但问题以粗体显示，提交数量从1开始，每次单击增加一次-看起来像是多事件绑定问题。正确答案是“是”。如果您使用javascript提交表单，那么将“提交”更改为“按钮”仍然是一个好主意。谢谢，我对本周早些时候的代码编写和类似经历仍然记忆犹新：）非常好的解释！这就解释了一切！我要去试试。
$('#inputInvokeId').submit(function(){
var formUrl = "invokeFunction.html?functionId="+inputInvokeId;
$.ajax({
                type: 'POST',
                url: formUrl,
                data: $(formId).serialize(),
                success: function (data){
                 alert('successfully invoked function!' + data);
                }
            });
            return false;
           }

})

<form action="" method="post" id="xxxxx-form" class="invokeFunctionForm">
<input name="functionId" value="xxxxx" readonly="readonly" style="visibility: hidden;" type="text">
<input value="Invoke" id="inputInvokeId" type="submit">
</form>