jQuery 検証プラグイン submitHandler の送信により無限ループが発生する solution_jquery

この記事の例では、jQuery 検証プラグインの submitHandler の送信によって引き起こされる無限ループの解決策について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

dom オブジェクトの送信 form.submit(); と jquery オブジェクトの送信 $('').submit(); の間に機能的な違いはありません。ただし、jquery validate プラグインを使用する場合、送信時に 2 つの間に大きな違いが生じます。 $('').submit(); をsubmitするとjquery validateで検証が行われますが、submitHandlerに$('').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();
  }
});

無限ループが発生すると、ブラウザはハングするまで読み込みを続けます。この時点でアラートを追加すると、validate がループ内で常に検証していることがわかります。個人的には、小さな問題ではありますが、考えにくいと思います。

jQuery プラグインに関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「一般的な jQuery プラグインと使用法の概要」

をチェックしてください。

この記事が jQuery プログラミングのすべての人に役立つことを願っています。