동적으로 생성된 콘텐츠에 이벤트 응답을 추가하는 jQuery에 대한 자세한 설명 jQuery live() method

jQuery live() 메소드는 일치하는 모든 요소에 이벤트 처리 함수를 첨부합니다. 나중에 추가, 추가, 이후 및 기타 이벤트를 통해 요소가 생성되더라도 여전히 유효합니다.
이 메서드는 .bind() 메서드의 변형으로 볼 수 있습니다. .bind()를 사용할 때 선택기와 일치하는 요소에는 이벤트 핸들러가 첨부되지만 나중에 추가되는 요소는 그렇지 않습니다. 이를 위해서는 .bind()를 다시 사용해야 합니다. 예:

<body> 
<div class="clickme">Click here</div> 
</body>

로그인 후 복사

이 요소에 간단한 클릭 이벤트를 바인딩할 수 있습니다.

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

$(' .clickme').bind('click', function() { Alert(www.jb51.net); }); 요소를 클릭하면 경고 상자가 나타납니다. 그런 다음 이 뒤에 다른 요소가 추가된다고 상상해 보세요.

코드 복사 코드는 다음과 같습니다.$('body').append('

다른 타겟

이 새 요소는 ".clickme" 선택기와도 일치하지만 이 요소는 .bind() 호출 후에 추가되므로 이 요소를 클릭해도 아무런 효과가 없습니다. 

그러나 live()는 이러한 상황에 대한 방법을 제공합니다. 클릭 이벤트를 다음과 같이 바인딩하면:

코드를 복사하세요 코드는 다음과 같습니다: $('.clickme ').live('클릭', function() { Alert("

www.jb51.net

"); }); 이런 방식으로 새로 추가된 요소를 클릭하면 여전히 이벤트 핸들러가 트리거될 수 있습니다. 행사위임

live() 메서드는 이벤트 위임 사용으로 인해 아직 DOM에 추가되지 않은 요소에 대해 작동합니다. 즉, 상위 요소에 바인딩된 이벤트 핸들러는 하위 요소에서 트리거된 이벤트에 응답할 수 있습니다. live()에 전달된 이벤트 핸들러는 요소에 바인딩되지 않지만 특수 이벤트 핸들러로 처리되어 DOM 트리의 루트 노드에 바인딩됩니다.
이 예에서는 새 요소를 클릭하면 다음 단계가 발생합니다. 1. 클릭 이벤트를 생성하고 처리를 위해

에 전달합니다.
2.

에 직접 바인딩된 이벤트 처리 함수가 없으므로 이벤트는 DOM 트리까지 버블링됩니다. 3. 이벤트는 기본적으로 DOM 트리의 루트 노드까지 버블링됩니다.
4. .live()에 바인딩된 특수 클릭 이벤트 처리 함수를 실행합니다.
5. 이 이벤트 처리 기능은 먼저 이벤트 개체의 대상을 감지하여 계속해야 하는지 여부를 결정합니다.
6. 이 테스트는 $(event.target).closest('.clickme')가 일치하는 요소를 찾을 수 있는지 여부를 테스트하여 구현됩니다.
7. 일치하는 요소가 발견되면 원래 이벤트 핸들러가 호출됩니다.
8. 위 5단계의 테스트는 이벤트 발생시에만 진행되므로, 언제든지 추가되는 요소들은 이 이벤트에 응답할 수 있습니다.
위 내용은 동적으로 생성된 콘텐츠에 이벤트 응답을 추가하는 jQuery의 jQuery live() 메서드에 대한 자세한 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

동적으로 생성된 콘텐츠에 이벤트 응답을 추가하는 jQuery에 대한 자세한 설명 jQuery live() method_jquery