jQuery .onイベントバインディングを変更しても発火させない

Question

var myTimelineVis = { 
    loadData: function(visItems, visContainer, visOptions, visTimelines) { 
     $.getJSON('myURL/' + $(this).val(), function(data) { 
      visItems.clear(); 
      $.each(data, function(i, imp_sched_events) { 
       $.each(imp_sched_events.items.timeline_dataset, function(i, item) { 
        visItems.add(item); 
        if ($(visContainer).is(':empty')) { 
         visTimeline = new vis.Timeline(visContainer, visItems, visOptions); 
        } else { 
         visItems.update(item); 
        } 
        visTimeline.fit(); 
        $('.vis-item-content').foundation(); 
       }); 
      }); 
     }); 
    }, 
    setData: function(selectClass) { 
     var visItems = new vis.DataSet(), 
      visContainer = document.getElementById('visualization'), 
      visOptions = {}, 
      visTimeline = ''; 
     $(selectClass).on('change', function(visItems, visContainer, visOptions, visTimelines) { 
      this.loadData(visItems, visContainer, visOptions, visTimelines); 
     }); 
    } 
} 

$(document).ready(function() { 
     myTimelineVis.setData('select.implementation_schedule'); 
}); 

私は、ページのロード時にタイムラインを作成しようとしていますが、select selectが変更されたときにデータをロードしようとしています。ページが読み込まれると、Chromeコンソール内の両方の選択項目に変更イベントのバインディングが表示されますが、実際の選択変更ではエラーが発生することはありません。彼らは存在しないように行動します。

これは範囲の問題ですか？

Answer 1

jQueryの場合、リスナーはAjax呼び出しではなく、$（document）.ready（）に追加されます。これは、バニラJavaScriptとは異なる動作をします。

selectが動的に変更された場合は、ハードコードされたセレクタで次の構文を使用する必要があります。セレクタは "#myForm select"のように幅広く使用できます。変数を使う必要はありません。

$(document).on('change', '.selectClass', function(visItems, visContainer, visOptions,  visTimelines) { 
      this.loadData(visItems, visContainer, visOptions, visTimelines); 
     }); 
});