使用JQuery Ajax提交表单会导致多个请求(和提交)

Question

我遇到了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>

这显然是不可取的.我能想到的唯一解决方案,id是在提交后重新呈现(动态生成的)表单,但这将是一项昂贵的操作.

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

谢谢.

Answer 1

每次单击按钮时,代码都会调用您的函数.在该函数中,该行将$(formId).submit(...);事件绑定到表单的提交操作.每次单击时都会发生这种情况,向表单添加多个"提交"事件.您需要先取消绑定操作.所以你可以打个电话$(formId).unbind('submit').submit(...);.