jQuery .on change event binding but not firing

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');
});

I am trying to trying to create a vis timeline on page load and then load data onto it when my select changes (I have two selects). On page load, I can see the change event binding to both selects within Chrome console, but nothing happens, not even an error, on the actual select change. It just acts like they don't exist.

Is this is a scope issue?

Answer 1

For jQuery, the listener would not be added in an Ajax call, but in the $(document).ready(). It works differently than vanilla JavaScript.

If the select is dynamically changed you would need to use the following syntax with a hard-coded selector. The selector can be broad like "#myForm select". There's no need to use a variable.

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