jQuery의 .live() 및 .die()_jquery 사용 소개

.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( '< div>확인해보세요!

')

그러나 사용자가 페이지의 모든 노드에 클릭 이벤트를 바인딩할 때 링크가 존재하지 않기 때문에 메서드가 호출되지 않으므로 .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()를 대체할 수 있으며 밀접하게 관련되어 있습니다.