"제출" 콜백을 사용할 때 여러 번 제출한 양식과 $.ajax를 게시합니다.

"제출" 콜백을 사용할 때 여러 번 제출한 양식과 $.ajax를 게시합니다.

다음 코드로 이상한 행동을 관찰했습니다.

$.fn.submit_to_remote = function() {
  // I use .each instead of the .submit directly so I can save
  // the 'submitEnabled' variable separately for each form
  jQuery.each($(this), function() {
    $(this).submit(function() {
      form = $(this);
      if (form.data('submitEnabled') == false) { alert('disabled'); return false; }
      form.data('submitEnabled', false);
      $.ajax({type: 'POST', url: 'url', data: data, dataType: 'script',
        success: function(script) {
          alert('success')
        }
      })
      return false;
    })
  })
}
$('.submit_to_remote').submit_to_remote();

따라서 기본적으로 양식에서 submit_to_remote를 호출하면 일반 제출을 비활성화한 다음 AJAX POST 요청을 수행합니다.

이상한 것은 '장애인' 경보가 나타날 것처럼 그 양식이 여러 번 게시된다는 것입니다.보시다시피 폼 오브젝트에 저장된 "변수"를 사용하고 해당 변수를 확인하여 폼이 이미 제출되었는지 확인함으로써 이를 방지하고 있습니다.

추가적인 테스트 결과, AJAX 호출에 의해 반환된 스크립트가 원인인 것으로 보입니다.제가 하는 일을 좀 더 명확하게 설명해 드리겠습니다.

양식이 서버에 게시되고 스크립트가 반환됩니다.스크립트는 양식을 다시 표시하지만 이번에는 일부 필드에 대한 오류 메시지가 표시됩니다.양식이 완전히 교체되었음을 유의합니다.

스크립트는 새 양식을 표시하면 다음을 실행합니다.

$('.submit_to_remote').submit_to_remote();

그렇지 않으면 다시 제출 버튼을 클릭하면 양식이 정상적으로 제출되고, AJAX는 제출되지 않기 때문에 그렇게 해야 합니다.

따라서 사용자가 양식을 제출하면 해당 양식이 적절한 오류와 함께 반환됩니다('사용 안 함' 경고는 표시되지 않음).그런 다음 다시 제출합니다. 이번에는 '사용 안 함' 경고가 한 번 표시됩니다.이제 한 번 더 제출하고 이번에는 경고가 두 번 표시됩니다!그래서..

그래서 요청할 때마다 .submit callback이 몇 번이고 추가되는 것처럼 보이지만, 그 이유는 무엇입니까?

.html()을 사용하여 원래 형태를 유령 같은 형태로 유지하는 것은 아닐까요?

감사합니다!

추신: 관련이 있을 경우 $.ajax 호출로 반환된 스크립트는 다음과 같습니다.

replace_content_with = 'the form and other stuff here';
$('.page-content').html(replace_content_with);
$('.submit_to_remote').submit_to_remote();

네, 세브의 의견에 동의합니다. 제 생각에는 현재 원하는 요소에 구속력이 없다고 확신하지 않는 한 구속력을 유지하기 전에 항상 구속력을 해제하는 것이 좋습니다.'.submit', '.click', '.mouseover' 등을 사용하여 사고 시 물건을 이중으로 묶을 수 있습니다.기능들.

이것을 하는 습관을 기르세요 (저는 절대 실패하지 않습니다):

$('.some_element').unbind('submit').bind('submit',function() {
    // do stuff here...
});

... 대신:

$('.some_element').submit(function() {
    // do stuff here...
});

언바인드는 나한테 안 통했어요.수행한 작업:

$(document).off('submit');
$(document).on('submit',"#element_id",function(e){
    e.preventDefault();
    //do something
}); 

도움이 됐으면 좋겠네요...

실제로 unbind()는 제출하기 전에 확인 및 반환할 경우 몇 가지 문제가 발생할 수 있습니다.예:

$(document).on('submit',"#element_id",function(e){
    e.preventDefault();
    $(document).unbind('submit');
    var name = $(this).children('input[name="name"]').val();
    if( name == 'wrong name')
        return;

    //do something
});

이 경우 '잘못된 이름'을 입력하면 양식이 제출되지 않으며, 이후 '잘못된 이름'을 입력하면 ('제출')에 $($).e.preventDefault()도 트리거되지 않으며, 양식은 일반적인 방식으로 제출됩니다.

이 이상한 행동에 대해서는 확실하지 않지만 제출 이벤트의 구속력을 해제하는 것이 효과가 있을 것으로 보입니다.

따라서 $.ajax 호출로 반환되는 스크립트를 실행하기 전에 다음을 실행합니다.

$('.submit_to_remote').unbind("submit");

그러면 이전 바인딩은 제거되고 새 바인딩만 남게 됩니다.

더 쉬워도 다음과 같습니다.

$(".some-class").off().submit(function() {
    //Do stuff here
});

jQuery submit() 를(를) .<input type="submit">, <input type="image">, or <button type="submit">(http://api.jquery.com/submit/) 형식으로.일부 프레임워크에서는 유형 특성을 "제출"로 기본 설정하므로 기본값을 재정의하려는 경우 유형 특성을 여러 번 제출하지 않도록 다른 것으로 변경합니다.

OpenCart 합니다에 합니다.common.js.

일치하지 않는 양식의 ID 패턴을 사용하여 이를 방지합니다."form-".

:<form id="myform" >.

이 코드를 사용하여 다음을 해결할 수 있습니다.

$(this).submit(function() {
.
.
.
});

$(this).unbind("submit");

저도 같은 문제가 있었고 클릭을 이용해서 아래와 같이 수정했습니다.

 $('.submit_to_remote').on('click', function(){
//Some validation or other stuff
$(this).submit();
});

언급URL : https://stackoverflow.com/questions/668314/form-submitted-multiple-times-when-using-the-submit-callback-and-ajax-to-pos