指定されたイベントでイベントハンドラがトリガされない

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：私は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>