jQuery 바인딩 이벤트가 중첩될 때의 솔루션 및 경험 요약에 대한 간략한 논의

jQuery를 배우면서 unbind event.unbind() 사용을 무시했는데, 바인딩 이벤트가 쌓일 줄은 몰랐고, 이런 이유로 우연히 프로젝트에 빠져들게 되었습니다. 나는 아직 너무 어리고, 배우고 익혀야 할 지식이 아직 많다고만 말할 수 있습니다.

내가 겪은 문제

프로젝트에서 겪은 상황, 평가 페이지는 쉽게 말하면 왼쪽과 오른쪽에 있는 두 개의 테이블로, Ajax는 학생 ​​이름과 학생 번호 정보를 동적으로 로드합니다. 서로 다른 과목에 대한 학생 평가 콘텐츠가 각각 두 부분으로 구성되어 있는데, 두 테이블의 각 행에 대해 체크박스를 작성하고 테이블 tbody tr에 바인딩하여 행 선택 기능을 수행했습니다. , 행 선택 기능에는 문제가 없었습니다. 나중에 변경했습니다. ajax가 동적으로 로드된 데이터가 jsp 페이지로 들어온 후 비동기 ajax 요청으로 인해 두 테이블에서 데이터를 로드하도록 요청하는 문제가 발생했습니다. 이전에 정적 페이지에서 테스트한 행 선택 기능에 문제가 있었습니다. 페이지를 새로 고칠 때마다 나중에 로드된 부분만 선택할 수 있으며 이전에 로드된 부분은 유효하지 않습니다. 자신의 콘솔에 클릭 상태를 인쇄하십시오. console.log(chkBoxStatus); 테스트 결과 이전에 로드된 부분은 항상 false true를 두 번 인쇄하고 나중에 로드된 부분은 false 또는 true를 한 번만 인쇄하는 것으로 나타났습니다.

이전 행 선택 코드 스니펫:

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

html에서 id와 class에 오류가 없는 것을 발견했는데 왜 나중에 콘솔이 예기치 않게 두 번 인쇄되는지 계속 궁금했습니다. 내 룸메이트가 함수를 실행하기 전에 이벤트 바인딩을 지워 보라고 상기시켜서 jquery의 .unbind("click")는 모든 테이블에서 클릭 이벤트를 지웠습니다. 결과! 그것은 성공으로 판명되었습니다! ! ! 양측의 테이블 데이터는 정상적으로 행 선택 기능을 수행할 수 있습니다. 예상한 기능은 완료되었으나 왜 이렇게 삭제 이벤트가 수행되었는지 알 수 없었습니다. 나중에 갑자기 로드된 데이터를 두 번 실행한 결과라는 생각이 들었습니다. 매번 로드된 데이터가 로드된 후 한 번씩 클릭 이벤트에 바인딩되고, 나중에 로드된 데이터가 로드된 후에는 이전에 로드된 데이터가 다시 바인딩되었습니다. click 이벤트이므로 먼저 로드된 데이터 행 선택이 유효하지 않고 false true가 두 번 인쇄되고 나중에 로드된 데이터 행 선택이 정상이고 한 번 인쇄됩니다.

다음은 수정된 코드입니다.

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

문제는 작지만 요컨대 아직 배우고 있습니다. 계속해서 자신을 발전시켜야 합니다. 블로그 포스팅은 제 자신을 요약한 것일 뿐입니다