동적으로 추가된 요소를 위해 jQuery의 .live()에서 .on()으로 어떻게 마이그레이션합니까?

jQuery에서 .live()를 .on()으로 업데이트

jQuery 버전 1.7 이상에서 .live() 메서드는 보다 다양한 .on() 메소드로 대체되었습니다. 그러나 .on()으로 전환할 때 적절한 이벤트 처리를 보장하려면 특정 미묘한 차이를 고려해야 합니다.

일반적으로 발생하는 문제 중 하나는 동적으로 추가된 요소와 관련됩니다. .live()는 지정된 선택기와 일치하는 기존 요소와 향후 요소 모두에 자동으로 이벤트 핸들러를 연결하는 반면, .on()은 호출 시 DOM에 이미 존재하는 요소에만 핸들러를 연결합니다.

유사한 결과를 얻으려면 동적 요소를 처리할 때 .live() 기능을 사용하려면 .on()을 사용하여 이벤트 핸들러를 상위 수준 요소(예: 문서 본문)에 바인딩해야 합니다. 메서드.

예를 들어, 동적 드롭다운이 웹 페이지에 추가되고 이벤트 핸들러가 이러한 드롭다운에 연결되어 변경 사항을 감지해야 하는 시나리오를 생각해 보세요. .on()을 사용하면 이벤트 핸들러가 다음과 같이 문서 본문에 바인딩됩니다.

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

또는 이벤트 핸들러를 대상 요소에 최대한 가깝게 바인딩하는 것이 좋습니다. 그러면 성능이 향상되고 비용이 절감됩니다. 잠재적인 문제.

위 내용은 동적으로 추가된 요소를 위해 jQuery의 .live()에서 .on()으로 어떻게 마이그레이션합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!