jquery_jquery에서 특정 요소의 반복 바인딩 문제에 대한 간략한 분석

어느 날 밤, 코드를 작성하던 중 갑자기 버그가 나타났습니다. 오랫동안 고민한 끝에 문제가 어디에 있는지 알 수 없었습니다. (사실 아주 간단한 문제였지만 아직은 초보였기 때문에, 그래서 몰랐어요) 우여곡절은커녕 그 사이의 과정은 말할 것도 없고, 무너지려던 순간에 비로소 그 이유를 찾아냈습니다. 동일한 jquery 요소를 반복적으로 바인딩할 수 있으며 중첩된 바인딩을 사용하면 오류가 발생하기 쉬운 것으로 나타났습니다. 예를 들어 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$( '.test').bind ('click',function(){
$('.last').bind('click',function(){
Alert('nihao');
});
} )

이전 바인딩
다음 레벨 바인딩

첫 번째 버튼을 클릭하고 두 번째 버튼을 클릭하면 문제가 없습니다. 하지만 페이지를 새로 고치기 전에 첫 번째 버튼을 여러 번(n회) 클릭한 후 이때 두 번째 버튼을 클릭하면 문제가 발생하고 (n)개의 경고 대화 상자가 나타납니다.

해결책: 반복적으로 바인딩할 요소를 바인딩 해제합니다. 즉, unbind(),예:

코드 복사 코드는 다음과 같습니다.

$('.test').bind('click',function(){
$ ('.last').unbind('click').bind('click',function(){
     Alert('nihao');
  })
}); >

이렇게 하면 첫 번째 버튼을 몇 번이나 클릭하더라도 두 번째 버튼을 클릭하면 경고 대화상자만 뜨게 됩니다.

bind(), one() 및 live()와 관련된 두 가지가 더 있습니다.

one() 메서드는 선택한 요소에 하나 이상의 이벤트 핸들러를 연결하고 이벤트가 발생할 때 실행할 함수를 지정합니다. one() 메서드를 사용할 때 이벤트 핸들러 함수는 요소당 한 번만 실행될 수 있습니다. 평신도의 관점에서는 한 번만 작동합니다.

live()에 대해서는 다른 사람들의 말을 인용하세요(http://www.cnblogs.com/wujilong/articles/1866834.html):
일반적으로 AJAX 작업에 jQuery를 사용할 때 새로 생성되는 요소 이벤트가 무효화되고 때로는 이벤트를 다시 바인딩해야 하지만 이는 매우 번거로운 일입니다. 예를 들어, 댓글 페이지가 매겨진 후에는 댓글 콘텐츠에 대한 JS 확인이 실패합니다. jQuery1.3 이전에는 이 문제를 해결해주는 플러그인이 있었습니다http://jquery.com/. jQuery1.3에는 live() 메소드가 추가되었습니다.

jQuery 1.3의 새로운 메소드. 현재 및 향후 일치하는 모든 요소에 이벤트 핸들러(예: 클릭 이벤트)를 바인딩합니다. 사용자 정의 이벤트도 바인딩될 수 있습니다.

현재 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup을 지원합니다.

블러, 포커스, 마우스입력, 마우스리브, 변경, 제출

은 아직 지원되지 않습니다.

bind()와 달리 live()는 한 번에 하나의 이벤트만 바인딩할 수 있습니다.

이 방법은 기존 바인딩과 매우 유사합니다. 차이점은 라이브를 사용하여 이벤트를 바인딩하면 페이지의 모든 현재 및 미래 요소에 이벤트가 바인딩된다는 것입니다(위임 사용). 예를 들어 live를 사용하여 클릭 이벤트를 페이지의 모든 li에 바인딩하는 경우입니다. 그런 다음 나중에 이 페이지에 li가 추가되면 새로 추가된 li의 클릭 이벤트를 계속 사용할 수 있습니다. 새로 추가된 요소에 이벤트를 다시 바인딩할 필요가 없습니다.

.live()는 널리 사용되는 liveQuery 플러그인과 매우 유사하지만 다음과 같은 주요 차이점이 있습니다.

•.live는 현재 모든 이벤트의 하위 집합만 지원합니다. 지원되는 목록은 위의 설명을 참조하세요.
•.live는 liveQuery에서 제공하는 "이벤트 없는" 스타일 콜백 함수를 지원하지 않습니다. .live는 이벤트 처리 기능만 바인딩할 수 있습니다.
•.live에는 "설정" 및 "정리" 프로세스가 없습니다. 모든 이벤트는 요소에 직접 바인딩되지 않고 위임되기 때문입니다.

라이브와 연결된 이벤트를 제거하려면 die 메소드를 사용하세요

사용 예:

jquery:
$(“.myDiv”).live(“클릭”, function(){
alert(“클릭!”);
});

javascript를 사용하여 mydiv 클래스로 요소를 동적으로 생성하는 경우 해당 요소를 클릭하면 팝업이 계속 나타납니다. 라이브 사용 후 왜 이런 현상이 발생하나요? 이는 jquery가 이벤트 버블링 메커니즘을 사용하여 이벤트를 문서에 직접 바인딩한 다음 event.target을 통해 이벤트 소스를 찾기 때문입니다. 이는 jquery.livequery 플러그인과 다릅니다. jquery.livequery는 20밀리초마다 이벤트를 확인하고 새 이벤트가 있으면 다시 바인딩합니다.

물론 라이브를 사용하면 장점과 단점이 있습니다.

장점은 요소를 업데이트할 때 이벤트를 반복적으로 정의할 필요가 없습니다.
단점은 다음과 같습니다. 이벤트를 문서에 바인딩하면 페이지의 모든 요소에 대해 이벤트가 한 번 호출됩니다. 부적절하게 사용하면 성능에 심각한 영향을 미칩니다. 그리고 흐림, 초점, mouseenter, mouseleave, 변경, 제출을 지원하지 않습니다.