동적으로 추가된 요소에 대해 jQuery의 `live()`를 `on()`으로 올바르게 마이그레이션하는 방법은 무엇입니까?

jQuery에서 live()에서 on()으로 전환: 이벤트 바인딩 디버깅

jQuery의 live() 메서드는 버전 1.7에서 더 이상 사용되지 않으므로 on( ). live()를 on()으로 바꾸면 이상적으로는 비슷한 결과가 나오지만, on() 문서에서는 이벤트 핸들러가 바인딩 시 페이지에 있는 현재 선택된 요소에만 바인딩된다는 점을 강조합니다.

원본 구현(라이브()):

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

교체 (on()):

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

live()와의 불일치는 이벤트를 첨부한 live()의 위임 메커니즘과 달리 on()이 현재 존재하는 요소에만 바인딩된다는 사실에서 비롯됩니다. DOM에 동적으로 추가된 요소에 대한 핸들러.

동적에 대한 on()의 올바른 사용 요소:

on()을 사용하여 동적으로 추가된 요소에 대한 이벤트 처리를 유지하려면 이벤트 핸들러가 바인딩 시 페이지에 존재하는 상위 요소에 바인딩되어야 합니다. 이는 다음을 사용하여 달성할 수 있습니다:

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

또는 이벤트 위임을 요소 계층 구조에 더 가깝게 적용하여 구체성을 향상시킬 수 있습니다.

jQuery 문서 참고:

live() 문서에서는 후속 항목 측면에서 live()를 다시 작성하는 작업에는 이벤트 핸들러를 바인딩하는 작업이 포함된다는 점을 명시적으로 명시하고 있습니다. 기존 요소:

$(document).on(events, selector, data, handler);  // jQuery 1.7+

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