이벤트 핸들러가 지정된 이벤트에서 트리거되지 않았습니다.

Question

복잡한 데이터 필드 종속성이있는 사용자 입력 양식을 구현 중입니다. 예를 들어 사용자의 주소를 수집하는 양식 : 국가, 주 및 번지.

국가 필드가 변경되면 상태 필드의 정리 프로세스를 트리거하려고합니다. 상태가 바뀌면 깨끗한 거리 주소 필드가 필요합니다. 이들은 종속 트리 구조처럼 연결됩니다.

내 설정은 JSFiddle입니다. 여기에는 5 개의 입력 상자가 있습니다. 종속성 트리는 HTML5 데이터 속성으로 구현됩니다.

각 입력 상자의 change 이벤트에 cleanSubtree 함수를 바인딩하려고합니다. 따라서 변경이 감지 될 때마다이 함수는 모든 종속 필드를 정리합니다. 아래와 같이 :

$('input').on('change',function cleanSubtreeHandlerWrapper(e){ 
     var inputElem = $(this); 
    return function(){ 
     e.stopPropagation(); 
     cleanSubtree(inputElem); 
    }; 
}); 

그러나 입력 상자의 텍스트를 변경하면 바운드 함수가 실행되지 않는 것처럼 보입니다. 하지만 함수를 직접 호출하면 함수가 올바르게 작동합니다 (예 : cleanSubtree($('#i3'));.

cleanSubtree의 기능이 실행되지 않았을 수 있습니다.

( PS : I jQuery를 2.1.4 및 크롬 51.0.2704.103를 사용하고 m) EDIT 값 : 수정 래퍼 함수를 ​​변경한다. 이전 버전은 래퍼 기능을 호출하지 않았다.

$('input').on('change', 
       function cleanSubtreeHandlerWrapper(e){ //** seems not triggered 
        e.stopPropagation(); 
        cleanSubtree($(this)); 
       }); 

Answer 1

변화 :

 $('input').on('change',function processNodeHandlerWrapper(e){ 
     var inputElem = $(this); 
    return function(){ 
     e.stopPropagation(); 
     cleanSubtree(inputElem); 
    }; 
}); 

에 :

<script> 
    $('input').on('change',function processNodeHandlerWrapper(e){ 
     var inputElem = $(this); 
     e.stopPropagation(); 
     cleanSubtree(inputElem); 
     }) 
</script>