A brief discussion on the solution and summary of experiences when jQuery binding events are superimposed

When I was learning about jQuery, I ignored the use of an unbind event.unbind(), and I didn’t know that binding events would accumulate. As a result, because of this reason, I stumbled into the project. I can only say that I am still too young and there is still a lot of knowledge that I need to learn and master.

Problems I encountered

The situation I encountered in the project is an evaluation page. Simply put, it is two tables on the left and right. Ajax dynamically loads the student name and student number information and the student evaluation content of different subjects. , I wrote a checkbox in each row of both tables and bound the click event to the table tbody tr to perform the row selection function. At first, I wrote a static page html, and the row selection function was no problem at all. Later, it was changed to a jsp page, and ajax dynamically loaded data. After entering, the problem arises. Due to the asynchronous ajax request, the two tables send requests to load data in sequence. The row selection function tested on the static page before has a problem. Every time the page is refreshed, only the part loaded later can be row selected. , some row selections loaded previously are invalid. Print the status of the click on your own console console.log(chkBoxStatus); the test found that the part loaded before always prints false true twice, and the part loaded later only prints false or true once.

My previous row selection 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);
  }
 
  });

At first I thought I must have something wrong with the jQuery function code, so I checked the id and class in the html myself and found that there were no errors, so I kept wondering why. The console would print twice unexpectedly. Later, my roommate reminded me to try clearing the event binding before executing the function, so I did so and used jquery's .unbind("click") to clear all click events on the table. result! It turned out to be a success! ! ! The table data on both sides can perform the row selection function normally. Although the expected function is completed, I didn't know why the clearing event was done in this way. Later, I suddenly thought that it was the result of executing two click events. Each time the data loaded first was bound to the click event once after loading, and after the data loaded later was loaded, the data loaded previously was bound again. A click event, so that is why the data row selection loaded first is invalid and false true is printed twice, and then the data row selection loaded later is normal and printed once.

The following is the modified 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);
  }
 
  });

Although the problem is small, it is also learning. In short, I still need to continue to work hard and improve myself. The blog post is just a summary of myself