동적으로 로드된 HTML 요소의 클릭 이벤트를 처리하는 방법: `.live()` 대 `.on()`?

동적으로 로드된 HTML에 대한 이벤트 처리: .live() 대 .on()

동적으로 로드된 HTML로 작업할 때 처음에 존재하지 않는 요소에 대한 이벤트를 처리하는 데 필수적입니다. 더 이상 사용되지 않는 .live() 메서드와 권장 대체 메서드인 .on()은 이 문제를 해결하기 위한 다양한 접근 방식을 제공합니다.

원래 질문에서는 $('#parent를 사용하여 동적으로 추가된 요소에 대한 클릭 이벤트를 등록하는 데 어려움이 있다고 표현했습니다. ').load("http://..."). .click()이 이벤트 캡처에 실패하는 동안 .live()는 작동하지만 더 이상 사용되지 않습니다.

해결책은 .on()을 사용하여 위임된 이벤트 처리에 있습니다. 이벤트를 동적으로 로드된 요소(#child)에 직접 연결하는 대신 하위 요소와 일치하는 선택기를 사용하여 상위 요소(#parent)에 바인딩하세요. 이 접근 방식을 사용하면 load() 작업 후에 #child가 생성되더라도 부모에 설정된 이벤트 핸들러를 상속하게 됩니다.

이 시나리오에 권장되는 구문은 다음과 같습니다.

$('#parent').on("click", "#child", function() {});

이러한 방식으로 클릭 이벤트 리스너는 #parent에 연결되고 #child에서 발생한 모든 클릭은 이벤트 핸들러에 의해 캡처 및 처리됩니다. 비록 부모가 처음에 존재할 때 #child가 존재하지 않을 수도 있습니다. 만들어졌습니다.

위 내용은 동적으로 로드된 HTML 요소의 클릭 이벤트를 처리하는 방법: `.live()` 대 `.on()`?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!