JavaScript 이벤트 핸들러가 추가된 요소에서 트리거되지 않는 이유는 무엇입니까?

JavaScript 이벤트 핸들러가 추가된 요소에 대해 트리거되지 않는 이유

제공된 HTML과 같이 DOM에 새 요소를 추가하는 경우 코드가 있는 경우 이전에 정의된 JavaScript 이벤트 핸들러가 새 요소를 인식하지 못할 수 있습니다. JavaScript 코드는 이벤트를 트리거하기 위해 특정 요소의 존재에 의존하기 때문에 이로 인해 예상치 못한 동작이 발생할 수 있습니다.

이 문제를 해결하려면 이벤트 위임을 사용해야 합니다. 이벤트 위임은 페이지가 로드될 때 존재하는 상위 요소에 이벤트 핸들러를 연결하는 기술입니다. 나중에 추가된 하위 요소에서 이벤트가 발생하면 이벤트가 상위 요소까지 버블링되고 상위 요소에 연결된 이벤트 핸들러가 트리거됩니다.

제공된 코드에 클릭을 첨부했습니다. .races 요소에 대한 이벤트 핸들러. 그러나 새 요소가 DOM에 추가되면 페이지 로드 시 jQuery가 초기화될 때 해당 요소가 없었기 때문에 jQuery가 해당 요소를 인식하지 못합니다.

이 문제를 해결하려면 클릭 이벤트를 가장 가까운 상위 요소에 위임하면 됩니다. .races 컨테이너 div와 같이 페이지 로드 시 존재합니다. 업데이트된 코드는 다음과 같습니다.

$(document).ready(function(){
  $('.races-container').on('click', '.races', function(e){
    ... // Your event handler code
  })
});

이벤트를 .races-container div에 위임하면 jQuery는 기존 요소와 새로 추가된 .races 요소 모두에 대한 클릭을 처리할 수 있어 이벤트 핸들러가 트리거되도록 할 수 있습니다.

이벤트 위임은 존재하지 않는 요소에 대한 이벤트를 처리할 수 있으므로 동적으로 생성된 콘텐츠로 작업할 때 일반적인 기술이라는 점을 기억하세요. 페이지 로드 시.

위 내용은 JavaScript 이벤트 핸들러가 추가된 요소에서 트리거되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!