CODEWITHSUNDEEP
jqueryonchange
Marcin Bobowski
Marcin Bobowski

Reputation: 1765

jQuery.on('change') not firing

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]"]';

Upvotes: 0

Views: 603

Answers (2)

Sergey
Sergey

Reputation: 5207

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

Upvotes: 1

Ashish Kumar
Ashish Kumar

Reputation: 3039

try this:

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

Good luck!!

Upvotes: 0

Related Questions