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

동적으로 생성된 요소에 대한 이벤트 처리

jQuery의 load() 또는 click()과 같은 메소드를 사용하여 요소를 동적으로 생성하면 캡처 이벤트가 트리거됩니다. 이러한 요소로 인해 어려울 수 있습니다. 정적 요소에 연결된 표준 이벤트 핸들러는 동적으로 생성된 요소에 대해 작동하지 않을 수 있습니다.

해결책: 이벤트 위임

이벤트 위임은 이벤트를 처리할 수 있는 기술입니다. 동적으로 생성된 요소에서 거품이 발생합니다. 이벤트를 정적 상위 요소에 위임하면 이벤트 핸들러가 바인딩될 때 이벤트가 존재하는지 확인할 수 있습니다.

jQuery의 .on() 메서드 사용

jQuery 버전의 경우 1.7 이상에서는 .on() 메서드를 사용하여 위임합니다. 이벤트:

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

jQuery의 .delegate() 메서드 사용(이전 버전)

이전 jQuery 버전(1.6 이하)의 경우 .delegate()를 사용하세요. 대신 방법을 사용하세요.

// Note the different order of selector and event
$('#modal').delegate('input', 'keyup', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

이벤트 위임을 사용하면 효과적으로 처리할 수 있습니다. 요소 생성 및 이벤트 바인딩 순서를 걱정하지 않고 동적으로 생성된 요소에 의해 트리거되는 이벤트입니다.

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