JavaScript 동적 로딩 중복 바인딩 문제

이 글은 주로 JavaScript 동적 로딩의 반복 바인딩 문제를 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

서문

데이터 추가 시 동적 로딩을 사용하세요. 나중에 심각한 버그를 발견했습니다. 데이터를 추가한 후 삭제를 클릭하면 아래와 같이 삭제할지 묻는 메시지가 표시됩니다.

하지만 2개 이상 추가하면 데이터를 삭제할 때 삭제 확인 메시지가 여러 번 표시됩니다.

조사 끝에 마침내 문제를 발견했습니다.

Text

콘텐츠를 동적으로 추가할 때 일반적으로 클릭 이벤트/변경 이벤트 등 추가된 p에서 사용해야 하는 이벤트를 작성합니다. 제 삭제 이벤트를 예로 들면, 메모 추가 시 삭제 이벤트를 작성해야 하기 때문에 첫 번째 데이터가 추가되면 한 번 바인딩되고, 두 번째 데이터가 추가되면 한 번 바인딩됩니다. , n 번째 데이터가 추가되면 한 번 바인딩되며, n 번째 삭제 이벤트가 바인딩되므로 n 번째 데이터를 삭제할 때 삭제 확인 메시지가 n 번 표시됩니다.

이제 오류의 원인을 찾았으므로 삭제 이벤트를 바인딩하기 전에 마지막 바인딩된 이벤트를 바인딩 해제하면 됩니다.

코드:

//解绑
$(".deletebtn").off("click");
$(".update").off("change");
//绑定
$(".deletebtn").bind('click', delete_click);
$(".update").bind('change', change_fonts);

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Ajax를 사용하여 중국어로 json을 프론트 데스크에 전달할 때 물음표가 왜곡되는 문제에 대한 해결 방법

AJAX는 사용자가 등록되었는지 확인하는 데 사용됩니다

ajax 비동기 파일 또는 이미지 업로드 기능 구현

위 내용은 JavaScript 동적 로딩 중복 바인딩 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!