> 웹 프론트엔드 > JS 튜토리얼 > jQuery에서 동적으로 추가된 요소의 이벤트를 어떻게 처리할 수 있나요?

jQuery에서 동적으로 추가된 요소의 이벤트를 어떻게 처리할 수 있나요?

Patricia Arquette
풀어 주다: 2024-12-11 19:50:19
원래의
650명이 탐색했습니다.

How Can I Handle Events from Dynamically Added Elements in jQuery?

동적으로 생성된 요소에 의해 트리거되는 이벤트 처리

DOM에 요소를 동적으로 추가할 때 표준 이벤트 핸들러를 사용하여 해당 요소에 의해 트리거되는 이벤트를 캡처하는 것은 문제가 될 수 있습니다. 이 문제는 요소가 생성되기 전에 이벤트 핸들러가 연결되어 이벤트가 캡처되지 않기 때문에 발생합니다.

jQuery는 .on() 메서드(또는 .delegate)를 사용하여 이 문제에 대한 솔루션을 제공합니다. () 이전 버전에서는). 이 메서드를 사용하면 핸들러가 바인딩될 때 이미 존재하는 정적 조상 요소에 이벤트 처리를 위임할 수 있습니다. 이렇게 하면 이벤트가 버블링되고 핸들러에서 캡처될 수 있습니다.

특정한 경우 다음과 같이 .on() 메서드를 사용하도록 코드를 수정할 수 있습니다.

// jQuery 1.7 or above
$('#modal').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});
로그인 후 복사

// jQuery 1.6 이하

$('#modal').delegate('input', 'keyup', function()
{
    handler = $(this).val();
    name = $(this).attr('name');
});
로그인 후 복사

이벤트 핸들러가 실행될 때 이미 존재하는 #modal 요소에 이벤트 처리를 위임합니다. 바인딩하면 해당 요소 내에서 동적으로 생성된 입력 요소에 의해 트리거되는 이벤트를 캡처할 수 있습니다.

위 내용은 jQuery에서 동적으로 추가된 요소의 이벤트를 어떻게 처리할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿