jQuery 마이그레이션: `on()`이 동적으로 추가된 드롭다운에서 작동하지 않는 이유는 무엇입니까?

jQuery: 동적으로 추가된 드롭다운을 위해 live()에서 on()으로 업그레이드

jQuery 1.7에서는 대체 방법으로 on() 메서드를 도입했습니다. 라이브()의 경우. on()의 구문과 의도된 기능은 간단해 보이지만 동적으로 추가된 요소에 대해 live()에서 on()으로 마이그레이션하려고 하면 사용자가 문제에 직면할 수 있습니다.

문제:

on()을 사용하여 동적으로 추가된 드롭다운 메뉴에서 변경() 이벤트를 수신할 때 이벤트 핸들러가 실패합니다. fire.

원인:

문서의 일치하는 모든 요소에 이벤트 핸들러를 첨부하는 live()와 달리 on()은 핸들러를 기존 요소에만 바인딩합니다. 이는 on() 이벤트 핸들러가 현재 선택된 요소로 제한되기 때문입니다. 이는 핸들러가 더 높은 수준의 요소에 바인딩되지 않는 한 새로 추가된 요소가 이벤트를 트리거할 수 없음을 의미합니다.

해결책:

live()의 동작을 복제하려면 동적으로 추가된 드롭다운을 캡슐화하는 상위 수준 요소에 이벤트 핸들러를 바인딩하세요. 이렇게 하면 해당 범위 내에 새로 추가된 모든 요소가 이벤트 핸들러를 트리거할 수 있습니다.

코드:

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

또는 바인딩하는 것이 가장 좋습니다. 이벤트 핸들러는 대상 요소에 최대한 가깝습니다. 그러나 이것이 모든 시나리오에서 항상 가능한 것은 아닙니다.

참고:

on() 문서에는 이벤트 핸들러가 현재 선택된 요소에 바인딩되며 바인딩 시 페이지에 존재해야 합니다.

위 내용은 jQuery 마이그레이션: `on()`이 동적으로 추가된 드롭다운에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!