Обработчик событий не запускается при указанном событии

Question

Я реализую форму ввода с сложными зависимостями поля данных. Например, форма, которая собирает адрес пользователя: страна, состояние и адрес улицы.

Когда поле страны изменено, я хочу вызвать процесс очистки поля состояния. Когда состояние изменено, я хочу очистить поле уличного адреса. Они соединены цепью, как структура дерева зависимостей.

Вот моя установка в JSFiddle. Он содержит 5 полей ввода. Их дерево зависимостей реализовано с атрибутами данных HTML5.

Я хочу, чтобы связать функцию cleanSubtree для change события каждого входа бокса. Поэтому всякий раз, когда обнаружено изменение, эта функция очищает все зависимые поля. Как показано ниже:

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

Однако, когда я изменяю текст любого окна ввода, ограниченная функция, похоже, не выполняется. Но функция будет работать правильно, если я вызову их напрямую, например. cleanSubtree($('#i3'));.

Могу ли я знаю, что мог причиной cleanSubtree функции не срабатывает?

(PS: Я использую JQuery 2.1.4 и Chrome 51.0.2704.103 м) 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>