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

동적 HTML을 사용한 이벤트 처리: jQuery .live() 대 .on()

동적으로 로드된 HTML로 작업할 때 이벤트 핸들러 추가 새로 생성된 요소에 접근하는 것은 어려울 수 있습니다. 이 질문은 동적으로 로드된 요소에 클릭 이벤트를 연결하기 위한 jQuery의 .live() 및 .on() 메서드 간의 차이점을 탐구합니다.

jQuery v1.7.1에서 .live()는 더 이상 사용되지 않습니다. 대신, 동적으로 생성된 콘텐츠를 사용한 이벤트 처리에는 .on()을 사용하는 것이 좋습니다. 그러나 질문자는 .on()이 $('#parent').load()를 사용하여 동적으로 로드된 요소에 대한 클릭 이벤트를 등록하지 못하는 상황에 직면했습니다.

이 시나리오에 대한 올바른 방법은 이벤트 위임입니다. .on()을 사용하여 달성했습니다. 이벤트 위임에는 동적 콘텐츠가 로드되기 전에 존재하는 상위 요소에 이벤트 핸들러를 연결하는 작업이 포함됩니다. 그런 다음 이벤트 핸들러는 동적으로 생성된 요소에서 발생하는 이벤트를 수신하도록 구성됩니다.

예를 들어, #parent에 동적으로 로드된 #child 요소에 클릭 핸들러를 연결하려면:

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

이 접근 방식을 사용하면 이벤트 핸들러가 연결될 때 해당 요소가 존재하지 않았더라도 이벤트 핸들러가 #child 요소에 대한 클릭 이벤트를 캡처할 수 있습니다. 이는 클릭 이벤트가 #child 요소에 대해 정의된 이벤트 핸들러가 있는 #parent 요소까지 버블링되기 때문입니다.

이벤트 위임은 동적으로 생성된 요소에 클릭 핸들러를 추가하는 문제를 해결하며 다음과 같은 경우에 권장되는 접근 방식입니다. 동적으로 로드된 HTML로 작업합니다.

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