提交带有jQuery ajax的表格会导致多个请求（和提交）

Question

我遇到了jQuery表单提交的问题，并且任何地方都没有找到答案。如果有人可以阐明这一点，那将不胜感激。

问题：我第一次提交表格时，它可以正常工作。但 如果我第二次提交相同的表格，它将发送2个请求，第三次请求，等等。

脚本：

    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>

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

这是JQuery Ajax提交的已知问题，还是我错过了明显的问题？是否有某种形式的递归发生？

谢谢。

Answer 1

每次单击按钮时，代码都在调用您的功能。在该功能中 $(formId).submit(...); 将事件绑定到表格的提交诉讼。每次单击时，都会发生这种情况，并将多个“提交”事件添加到表单中。你需要 解开 动作首先。所以你可以打电话 $(formId).unbind('submit').submit(...); 反而。

Answer 2

当你这样做

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

您将功能添加到 submit 事件。当您单击 submit 按钮您正在添加一个 function 并通过默认行为提交 input type="submit". 。当您再次单击时，您会添加相同的 function 到 submit 事件。因此，当您单击一次时，您有一个 function 在里面 submit 事件，当您单击两次时，您有两个 functions.

也就是说，您可以做自己想做的事：

$('#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>

Answer 3

改变

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

到

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

<intup type =“ submit”>是导致双重提交的原因。