모달 내에서 동적으로 생성된 요소에서 이벤트를 캡처하려면 어떻게 해야 합니까?

동적으로 생성된 요소에서 이벤트 캡처

모달 DIV 내에서 동적으로 생성된 요소에 의해 트리거된 이벤트가 발생하지 않는 문제가 발생하고 있습니다. 기존 이벤트 핸들러에 의해 캡처되었습니다. 이 문제는 이벤트 핸들러가 바인딩된 후에 추가되는 이러한 요소의 동적 특성으로 인해 발생합니다.

이 문제를 해결하기 위해 jQuery는 .on 및 .delegate라는 두 가지 메서드를 제공합니다(jQuery 1.7 이전 버전의 경우). ). 이러한 메서드를 사용하면 핸들러가 바인딩될 때 존재하는 정적 상위 요소에 이벤트를 위임할 수 있습니다. 이 경우 모달 DIV는 정적 조상 역할을 합니다.

.on 또는 .delegate를 사용하면 이벤트가 조상 요소까지 버블링되고 이벤트 핸들러를 트리거할 수 있습니다. 내부에서 동적으로 생성된 요소에 대해서도 마찬가지입니다. 그것. 다음은 .on 메서드를 활용하는 업데이트된 코드입니다.

$('#modal').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

또는 jQuery 1.7 이전 버전의 경우 다음과 같이 .delegate 메서드를 사용할 수 있습니다.

$('#modal').delegate('input', 'keyup', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

이를 구현하여 솔루션을 사용하면 모달 DIV 내에서 동적으로 생성된 요소에 의해 트리거되는 이벤트를 효과적으로 캡처하고 처리하여 사용자 입력이 다음과 같이 기록되도록 할 수 있습니다. 예상됩니다.

위 내용은 모달 내에서 동적으로 생성된 요소에서 이벤트를 캡처하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!