> 웹 프론트엔드 > JS 튜토리얼 > 내 jQuery `on('change')`가 동적으로 추가된 드롭다운에서 작동하지 않는 이유는 무엇입니까?

내 jQuery `on('change')`가 동적으로 추가된 드롭다운에서 작동하지 않는 이유는 무엇입니까?

Barbara Streisand
풀어 주다: 2024-12-15 13:43:12
원래의
377명이 탐색했습니다.

Why Doesn't My jQuery `on('change')` Work on Dynamically Added Dropdowns?

jQuery의 live()를 on()으로 전환: 무엇이 잘못되었나요?

jQuery에서 live() 메소드는 다음으로 대체되었습니다. 이벤트 처리를 위한 on()입니다. 그러나 jQuery 1.7로 마이그레이션하고 동적으로 추가된 드롭다운의 변경 사항을 감지하기 위해 on('change')을 사용했음에도 불구하고 이벤트 핸들러는 계속 비활성화되었습니다.

해결책

주요 차이점은 on()이 이벤트 위임을 처리하는 방식에 있습니다. 동적으로 생성된 요소에 이벤트 핸들러를 연결하는 live()와 달리 on()은 호출 당시 존재하는 요소에만 핸들러를 바인딩합니다.

live()와 동일한 기능을 달성하려면 on( ) 구문은 다음과 같이 수정해야 합니다.

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

이것은 이벤트 핸들러를 문서 본문에 바인딩하여 추가된 요소에 대해서도 핸들러가 연결되도록 합니다. 동적으로.

또는 보다 타겟이 명확한 이벤트 처리를 위해 핸들러를 가능한 가장 가까운 조상 요소에 연결하는 것을 고려하십시오.

jQuery 문서에는 on()이 이전 요소와 다르게 동작한다고 명시적으로 명시되어 해당 이벤트를 강조합니다. 핸들러는 기존 요소에만 바인딩됩니다. 이는 on('change')를 사용한 초기 구현이 실행되지 않은 이유를 설명합니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿