새 요소를 추가한 후 JavaScript 이벤트가 실행되지 않는 이유는 무엇입니까?

추가 후 JavaScript가 실행되지 않습니다

문제 요약

JavaScript를 사용하여 웹페이지에 새 입력 요소를 추가하면 후속 이벤트가 실행되지 않을 수 있습니다. 이는 jQuery가 새로 추가된 요소를 인식하지 못하기 때문입니다.

이벤트 위임 및 버블링

jQuery는 특정 요소에 대한 이벤트 핸들러를 등록하여 작동합니다. 그러나 새 요소가 동적으로 추가되면 이러한 이벤트 핸들러는 이를 인식할 수 없습니다. 이 문제를 해결하기 위해 이벤트 위임이 사용됩니다.

이벤트 위임에는 jQuery가 로드될 때 DOM에 이미 존재하는 상위 요소에서 이벤트를 수신하는 작업이 포함됩니다. 중첩된 하위 요소 내에서 이벤트가 발생하면 이벤트 핸들러가 이를 캡처할 수 있는 상위 요소까지 버블링됩니다.

코드 솔루션

제공된 코드에서 이벤트 위임을 사용하려면 on() 메소드를 사용하려면 버튼에 대한 이벤트 핸들러를 수정해야 합니다. 이 방법을 사용하면 이벤트 수신이 상위 요소에 위임될 수 있습니다.

$(document).on('click', '.races', function(e) {
  // ... rest of the code
});

$(document).on()을 사용하면 이벤트가 DOM에 있는 문서 객체에 위임됩니다. 페이지 로드. 이렇게 하면 새로 추가된 .races 요소의 이벤트가 이벤트 핸들러에 의해 캡처되고 처리됩니다.

위 내용은 새 요소를 추가한 후 JavaScript 이벤트가 실행되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!