jQuery.on('change') not firing

Question

I'm working on a big application, that has a lot of JS modules. In one of them this code is being used:

var tinput = tmpl.find('[name="Filter[TravelTime][Selected]"]');
tinput.val(ui.value);
tinput.trigger('change');

It simply changes the valuo of hidden input and forces 'change' state on it.

In another part I have this simple function:

$('body').on('change', selectorSlider, function(){
console.log('fired');
});

what it should do is to show log when input's value changes - but it don't fire. I have tried also this way:

$(selectorAvailableHolder).find(selectorSlider).on('change', function(){...}

Also no success. The only way to fire the event is to use pure .onchange:

$(selectorAvailableHolder).find(selectorSlider).get(0).onchange = function() {...}

And this works... except one problem - selectorSlider is not always available on document ready (it is generated from ajax request and cached, so it works when cached - as it is available right on the stert, but dont when not cached - as I have to wait for ajax response which takes few seconds).

Is there any way to debug this and find cause why change event don't propagate correctly?

There might be some typos in the code as I'm writting it dirrectly here (no access to oryginal code right now).

selectorSlider is defined this way:

var selectorSlider = '[name="Filter[TravelTime][Selected]"], [name="Filter[FlightTime][Selected]"]';

Answer 1

Try this:

var tinput = tmpl.find('[name="Filter[TravelTime][Selected]"]');
tinput.val(ui.value);
$('body').trigger('change:filter', [ tinput ]);

on body

$('body').on('change:filter', function(event, tinput){
  console.log(tinput, 'fired change');
});

Answer 2

try this:

$(selectorAvailableHolder).on('change', selectorSlider, function(){...}

Good luck!!