JavaScript에서 동적으로 추가된 DOM 요소에 대한 이벤트를 어떻게 처리할 수 있습니까?

동적 DOM 수정 후 JavaScript 이벤트 처리

JavaScript 요소가 웹페이지에 동적으로 추가되면 이벤트 처리에 문제가 발생할 수 있습니다. 새로 추가된 요소들입니다. 이러한 시나리오에서 JavaScript는 추가된 요소와 정의된 이벤트 리스너를 인식하지 못합니다.

이 문제에 대한 한 가지 해결책은 이벤트 위임입니다. 이벤트 위임을 사용하면 새로 추가된 요소에서 JavaScript가 초기화될 때 사용 가능한 기존 상위 요소로 이벤트가 버블링됩니다. 동적으로 추가된 각 요소에 이벤트 리스너를 할당하는 대신 기존 요소와 향후 요소를 모두 포함하는 상위 수준 상위 요소에 할당하세요.

특정 코드의 맥락에서 대신 on() 메서드를 사용하는 것이 좋습니다. 이벤트 핸들러를 구현하기 위한 click() 메소드. on() 메서드는 이벤트 위임을 지원하므로 페이지가 로드될 때 존재했던 상위 항목에 이벤트를 위임할 수 있습니다.

$(document).on('click', '.races', function(e) {
  // Event handling code
});

이벤트 위임을 코드에 통합하면 이벤트 핸들러가 동적으로 추가된 요소에 등록 및 작동하여 애플리케이션에 추가된 요소에 대해 JavaScript 이벤트 리스너가 실행되지 않는 문제를 해결합니다.

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