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 중국어 웹사이트의 기타 관련 기사를 참조하세요!