Eine kurze Diskussion zur Lösung und Zusammenfassung der Erfahrungen bei der Überlagerung von jQuery-Bindungsereignissen

Als ich etwas über jQuery lernte, ignorierte ich die Verwendung von unbind event.unbind() und wusste nicht, dass sich Bindungsereignisse ansammeln würden. Aus diesem Grund bin ich auf das Projekt gestoßen. Ich kann nur sagen, dass ich noch zu jung bin und es noch viel Wissen gibt, das ich lernen und beherrschen muss.

Probleme, auf die ich gestoßen bin

Die Situation, auf die ich im Projekt gestoßen bin, ist eine Bewertungsseite, einfach ausgedrückt, es sind zwei Tabellen auf der linken und rechten Seite. Ajax lädt dynamisch die Informationen zum Studentennamen und zur Studentennummer Es gibt zwei Teile des Schülerbewertungsinhalts für verschiedene Fächer. Ich habe für jede Zeile beider Tabellen ein Klickereignis an den Tabellenkörper gebunden, um die Zeilenauswahlfunktion auszuführen , und es gab kein Problem mit der Zeilenauswahlfunktion. Nachdem die dynamisch geladenen Ajax-Daten als JSP-Seite eingegangen waren, trat das Problem auf. Aufgrund der asynchronen Ajax-Anfrage sendeten die beiden Tabellen Anforderungen zum Laden der Daten Es gab ein Problem mit der Zeilenauswahlfunktion, die zuvor auf der statischen Seite getestet wurde. Bei jeder Aktualisierung der Seite können nur die später geladenen Teile ausgewählt werden, und die zuvor geladenen Teile sind ungültig. Drucken Sie den Status des Klicks auf Ihrer eigenen Konsole aus console.log(chkBoxStatus); der Test ergab, dass der zuvor geladene Teil immer zweimal „false true“ ausgibt und der später geladene Teil nur einmal „false“ oder „true“ ausgibt.

Mein vorheriges Zeilenauswahl-Code-Snippet:

//行选功能
  $("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);
  }
 
  });

Ich habe festgestellt, dass es in HTML keine Fehler in ID und Klasse gab, also habe ich mich immer wieder gefragt, warum die Konsole später zweimal unerwartet drucken würde. Mein Mitbewohner hat mich daran erinnert, vor dem Ausführen der Funktion zu versuchen, die Ereignisbindung zu löschen, also habe ich dies getan. Unbind("click") von jquery löscht alle Klickereignisse in der Tabelle. Ergebnis! Es war ein Erfolg! ! ! Die Tabellendaten auf beiden Seiten können die Zeilenauswahlfunktion normal ausführen. Obwohl die erwartete Funktion abgeschlossen ist, wusste ich nicht, warum das Löschereignis auf diese Weise durchgeführt wurde. Später dachte ich plötzlich, dass es das Ergebnis der Ausführung von zwei Klickereignissen war. Jedes Mal wurden die zuerst geladenen Daten nach dem Laden einmal an das Klickereignis gebunden, und nachdem die später geladenen Daten geladen wurden, wurden die zuvor geladenen Daten erneut gebunden Click-Ereignis, weshalb die zuerst geladene Datenzeilenauswahl ungültig ist und zweimal „falsch wahr“ gedruckt wird, und die später geladene Datenzeilenauswahl normal ist und einmal gedruckt wird.

Das Folgende ist der geänderte Code:

//行选功能
  $("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);
  }
 
  });

Obwohl das Problem klein ist, lernt es auch. Kurz gesagt, ich immer noch Du musst weiter hart arbeiten. Der Blogbeitrag ist nur eine Zusammenfassung meiner selbst