JQuery Ajax로 양식을 제출하면 여러 요청 (및 제출)이 발생합니다.

Question

JQuery 양식 제출 문제가 발생하여 어디에서나 답변을 찾을 수 없습니다. 누군가가 이것에 대해 밝힐 수 있다면, 매우 높이 평가 될 것입니다.

문제 : 처음 양식을 제출할 때 문제가 없습니다. 그러나 두 번째 동일한 양식을 제출하면 두 개의 요청, 세 번째 요청, 세 번째 요청 등을 보냅니다.

스크립트 :

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(...);은 이벤트를 양식의 제출 조치에 바인딩합니다. 이것은 클릭 할 때마다 발생하여 양식에 여러 개의 "제출"이벤트를 추가합니다. 먼저 조치를 unbind해야합니다. 그래서 대신 $(formId).unbind('submit').submit(...);으로 전화 할 수 있습니다.

Answer 2

변경

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

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

에 < 입력 유형 = 이중 제출의 원인이 무엇인가> "제출".

Answer 3

이

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

당신은 submit 이벤트에 기능을 추가 할 때. submit 단추를 클릭하면 function이 추가되고 기본 동작은 input type="submit"입니다. 다시 클릭하면 동일한 function을 submit 이벤트에 추가합니다. 따라서 submit 이벤트에 function 중 하나를 클릭하면 두 번 클릭 할 때 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>