jQuery 유효성 검사 플러그인 submitHandler 제출로 인해 무한 루프가 발생함

이 문서의 예에서는 jQuery 유효성 검사 플러그인 submitHandler 제출로 인해 발생하는 무한 루프에 대한 솔루션을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

dom 개체의 제출 form.submit();과 jquery 개체의 제출 $('').submit(); 사이에는 기능적 차이가 없습니다. 하지만 jquery 유효성 검사 플러그인을 사용하면 제출할 때 둘 사이에 큰 차이가 발생합니다. $('').submit();이 제출되면 jquery verify가 submitHandler에 $('').submit();을 작성하면 무한 루프가 발생하지만 form.submit(); 그렇지 않습니다.

이 문제는 사소한 문제입니다. 주의를 기울이지 않거나 글쓰기에 익숙하면 실수하기 쉽고, 실수하면 찾기가 어렵습니다. 원인을 찾는 데 거의 2시간이 걸렸습니다.

1. dom 객체와 jquery 객체에 대해 간단히 알아보겠습니다

dom 객체의 경우 페이지에서 태그를 작동하려면 js 작성 방법을 사용해야 합니다. jquery 객체의 경우 jquery 구문을 사용해야 작동합니다.

dom 개체를 jquery 개체로 변환하는 방법도 매우 간단합니다. $()만 추가하면 jquery 구문을 사용하여 페이지의 태그를 조작할 수 있습니다. 다들 이 방법을 가장 많이 사용하는 것 같아요. 예를 살펴보십시오.

$('input[name^="hour"]').each(function(index){
  this.value=index; //this是dom对像,js写法
});
$('input[name^="hour"]').each(function(index){
  $(this).val(index); //$(this)是jquery对像，jquery写法
});

2. jquery 무한 루프 프로그램 검증

$("#product_form").validate({
  focusInvalid:false,
  submitHandler: function(form){
    $('.submit').submit();
  }
});

정확한 글쓰기,

$("#product_form").validate({
  focusInvalid:false,
  submitHandler: function(form){
    form.submit();
  }
});

무한 루프가 발생하면 브라우저가 멈출 때까지 브라우저가 계속 로드됩니다. 이때 경고를 추가하면 루프에서 유효성 검사가 지속적으로 확인된다는 것을 알 수 있습니다. 개인적으로는 작은 문제임에도 불구하고 생각하기 어려운 문제라고 생각합니다.

jQuery 플러그인과 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "일반적인 jQuery 플러그인 및 사용법 요약"

을 확인할 수 있습니다.

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.