JQueryループにおけるバインディングイベントの問題の詳細な説明

N 個の DOM を必要とするページがある場合、jQueryevents を dom に手動でバインドする必要がある場合、作業負荷は膨大になり、コードの量も増加し、非常に面倒になります。 jQueryLoopバインディング イベントを使用して、ワークロードと jQuery コードの量を削減します。 早速、見ていきましょう。

N 個の DOM を必要とするページがあります。各 DOM の要素 ID は数字で終わる必要があります。例:

<input type="text" name="username" id="username_1" value="" />
<input type="text" name="username" id="username_2" value="" />
<input type="text" name="username" id="username_3" value="" />

ページがロードされるときに、各要素を で追加する必要があります。 イベント、

$(function(){
 for(var i=1; i<=3; i++){
  $(&#39;#username_&#39;+i).onclick(function(){
   alert(i);
  });
 }
});

と書くと考えがちですが、これは間違いです。 。 。

次に、それを次のように変更します:

$(function(){
 for (var i=1; i<=3; i++){
  $("#username_"+i).bind("click", {index: i}, clickHandler);
 }

 function clickHandler(event) {
  var i= event.data.index;
  alert(i);
 }
});

上記は、ループ内の JQuery バインディング イベントの問題の詳細な説明です。詳細については、このサイトを検索してください。

関連する推奨事項:

jQuery ループ マップ関数に基づくコード_jquery

JQuery ループ スクロール画像コード_jquery

jQuery ループ スクロール ニュース リスト サンプル コード_jquery

以上がJQueryループにおけるバインディングイベントの問題の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。