jQuery バインディング イベントがスーパーインポーズされる場合の解決策とエクスペリエンスの概要に関する簡単な説明

jQuery を勉強していたとき、unbindevent.unbind() の使用を無視していましたが、バインディングイベントが蓄積されることを知らず、結果として、このプロジェクトに躓くことになりました。ただ言えるのは、私はまだ若すぎて、学んで習得しなければならない知識がまだたくさんあるということです。

遭遇した問題点

プロジェクトで遭遇した状況、評価ページですが、簡単に言うと左右に2つのテーブルがあり、Ajaxが異なる科目の生徒名と生徒番号の情報と生徒の評価内容を動的に読み込んでいます。 . 両方のテーブルの各行にチェックボックスを作成し、クリックイベントをテーブル tbody tr にバインドして行選択関数を実行しました。最初は静的なページ html を作成しましたが、行選択関数はまったく問題ありませんでした。その後、JSP ページに変更され、ajax がデータを動的にロードした後、2 つのテーブルがデータをロードするリクエストを順番に送信して静的ページでテストするという問題が発生しました。 before には問題があり、ページが更新されるたびに、後でロードされた部分のみが行選択され、以前にロードされた一部の行選択が無効になります。クリックのステータスを自分のコンソールに出力します console.log(chkBoxStatus); テストでは、前にロードされた部分は常に false true を 2 回出力し、後でロードされた部分は false または true を 1 回だけ出力することがわかりました。

私の前の行選択コードスニペット:

//行选功能
  $("table tbody tr").click(function(event) {
 
  //遍历tr下的checkbox元素
  var $check = $(this).find("input[type=checkbox]");
 
  //判断非点击checkbox本身
  if($check.length > 0 && event.target != $check[0]) {
    var chkBoxStatus = $check.is("input:checked");
    console.log(chkBoxStatus);
    $check.prop("checked", !chkBoxStatus);
  }
 
  });

最初は、jQuery関数のコードに何か問題があるに違いないと思い、HTMLのIDとクラスを自分でチェックしたところ、エラーがないことがわかりました。その後、ルームメイトが関数を実行する前にイベント バインディングをクリアしてみるようにと促したので、jquery の .unbind("click") を使用してすべてのクリック イベントをクリアしました。テーブル。結果！結果的には成功でした！ ！ ！両側のテーブルデータは行選択機能を正常に実行できますが、期待された機能は完了しましたが、なぜこの方法でイベントのクリアが行われるのかわかりませんでした。後になってふと思ったのですが、クリックイベントを2回実行するたびに、最初に読み込んだデータが一度読み込まれた後にクリックイベントにバインドされ、後から読み込んだデータが読み込まれた後に、先に読み込まれたデータが再度バインドされていたのだと思いました。クリック イベントであるため、最初にロードされたデータ行選択は無効で false true が 2 回印刷され、その後ロードされたデータ行選択は正常で 1 回印刷されます。

以下は修正されたコードです:

//行选功能
  $("table tbody tr").unbind("click");//清除table的所有click事件 
  $("table tbody tr").click(function(event) {
 
  //遍历tr下的checkbox元素
  var $check = $(this).find("input[type=checkbox]");
 
  //判断非点击checkbox本身
  if($check.length > 0 && event.target != $check[0]) {
    var chkBoxStatus = $check.is("input:checked");
    console.log(chkBoxStatus);
    $check.prop("checked", !chkBoxStatus);
  }
 
  });

問題は小さいですが、それはまた学習でもあります。つまり、私はまだ努力して自分自身を改善する必要があります。このブログ記事は私自身の要約です