jQuery의 .live() 및 .die()_jquery 사용 소개-JS 튜토리얼-php.cn

.live()란 무엇입니까 .live 메소드는 이벤트를 DOM 요소에 바인딩할 수 있다는 점을 제외하면 .bind()와 유사합니다. 아직 존재하지 않는 경우 다음 예를 살펴보세요.

사용자가 링크를 클릭하면 사이트를 떠난다는 것을 알리고 싶다고 가정해 보겠습니다. 코드 복사 코드는 다음과 같습니다. $(document).ready( function( ) { $('a').click( function() { alert("이제 이 사이트를 떠나고 있습니다."); return true; }) }) ; .click()은 보다 일반적인 .bind()를 구현하는 간단한 방법일 뿐입니다. 아래와 위의 코드는 위의 구현과 동일합니다. 코드 복사 코드는 다음과 같습니다. $(document).ready( function( ) { $('a').bind( 'click', function() { alert("이제 이 사이트를 종료합니다."); return true; }); 🎜>} );

이제 자바스크립트를 통해 페이지에 대한 링크를 추가하세요.

코드 복사 코드는 다음과 같습니다. $('body').append( ' 확인해보세요! ')

그러나 사용자가 페이지의 모든 노드에 클릭 이벤트를 바인딩할 때 링크가 존재하지 않기 때문에 메서드가 호출되지 않으므로 .bind()를 .live()로 바꿉니다.

코드 복사 코드는 다음과 같습니다. $(document).ready( function() { $('a ').live( 'click', function() { alert("이제 이 사이트를 종료합니다."); return true; }); ;

이제 페이지에 새 링크를 추가하면 바인딩도 작동합니다. .live() 작동 방식 .live()의 마법은 이벤트를 선택한 요소에 바인딩하지 않고 실제로 노드( $(document)(예제에서는)) 매개변수처럼 요소에 전달됩니다.

그런 다음 요소를 클릭하면 클릭 이벤트가 루트 노드에 도달할 때까지 DOM 트리를 따라 전달됩니다. 이 .click() 이벤트에 대한 트리거는 루트 노드의 .live()에 의해 생성되었습니다. 이 트리거 메서드는 먼저 클릭한 대상이 .live()에서 호출한 선택기와 일치하는지 확인합니다. 따라서 위의 예에서는 클릭한 요소가 $('a').live()의 $('a')와 일치하는지 확인하고 일치하면 바인딩 메서드가 실행됩니다.

루트 노드 내에서 무엇을 클릭하더라도 루트 노드의 .click() 이벤트가 발생하기 때문에 이 확인은 루트 노드에 추가된 요소를 클릭할 때 발생합니다.

모든 .live()는 .die()일 수 있습니다. .bind()를 알고 있다면 .unbind()도 확실히 알고 있을 것입니다. 그러면 .die()와 .live()는 비슷한 관계를 갖습니다. 위 바인딩에 액세스하기 위해(사용자가 링크를 클릭할 때 대화 상자가 팝업되는 것을 원하지 않음) 다음을 수행합니다.

코드 복사 코드는 다음과 같습니다. $('a').die(); 더 구체적으로 바인딩되어 필요한 다른 이벤트가 있는 경우 호버 등을 유지하려면 클릭 이벤트만 바인딩 해제할 수 있습니다.

코드 복사 코드는 다음과 같습니다. $('a').die('click' ); 더 구체적으로 메소드 이름이 정의되어 있으면 지정된 메소드를 바인딩 해제할 수 있습니다.

코드 복사 코드는 다음과 같습니다. specialAlert = function() { Alert(" 이제 이 사이트를 종료합니다."); return true } $(document).ready( function() { $('a').live( '클릭 ', SpecialAlert ); $('a').live( 'click', someOtherFunction ) }) // 다른 곳에서는 첫 번째 바인딩만 해제할 수 있습니다 $ ('a').die( '클릭', SpecialAlert )

.die() 관련 질문 이러한 함수를 사용할 때 .die() 메서드에는 단점이 있습니다. .live() 메소드에 사용된 요소 선택기만 사용할 수 있습니다. 예를 들어 코드 복사 코드는 다음과 같습니다. $(document).ready( function() { $('a').live( 'click', function() { alert(" 이제 이 사이트를 떠나고 있습니다."); return true; }) // 그런 다음 특정 요소를 선택할 수 있으면 좋을 것입니다 // 바인딩을 해제하지만 아무 작업도 수행하지 않습니다 $('a.no-alert').die();

.die() 이벤트는 대상 선택이 일치하는 것처럼 보이며 .live() 바인딩이 출시되었지만 실제로 $('a.no-alert')에는 바인딩이 없으므로 jquery는 이를 제거할 바인딩을 찾을 수 없으며 작동하지 않습니다. 더 나쁜 것은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. $( document).ready( function() { $('a,form').live( 'click', function() { alert("다른 페이지로 이동합니다.") ; true; }); // 둘 다 작동하지 않습니다. $('form ').die ();// 이것만 작동합니다 $('a,form').die()

.die() 수정 방법 다음 글에서는 이전 버전과 호환되는 무드 동작을 제공할 수 있는 .die()를 실행하는 새로운 방법을 제안하겠습니다. 시간이 있으면 jQuery 핵심 개발 팀이 내 제안을 받아들이고 다음 릴리스에서 수정하도록 제안할 것입니다. 선택적 컨텍스트 매개변수를 포함하여 방금 작성한 메서드를 더 많이 사용하여 사용자 정의 노드를 연결할 수 있기를 바랍니다. 이벤트이며 루트 노드가 아닙니다. 더 많은 정보와 예제를 원하시면 jQuery .live() 및 .die()

문서를 확인하세요. 또한 .delegate() 및 .undelegate()

는 .live() 및 .die()를 대체할 수 있으며 밀접하게 관련되어 있습니다.