The first thing you need to do is remove the parentheses from the function. What your code is currently expecting is for getCarModel
to return a function which is then being called when the event is triggered.
It looks like this is what you would like to do:
$('#' + this.ID + ' .selMake').on('change', that.getCarModel);
Not this:
$('#' + this.ID + ' .selMake').on('change', that.getCarModel());
If you want to call the function that way, you can do as follows:
var that = this;
$('#' + this.ID + ' .selMake').on('change', function () {
that.getCarModel();
});
Above, you are passing an anonymous function as an argument which will execute the code inside of it.
In the functions above, the definition of this
will depend on the element that triggered the event. If you want the definition of this
to be tied to your this
object, you can do the following:
The most simple, understandable way is to use the that
variable:
var that;
$('#' + this.ID + ' .selMake').on('change', that.getCarModel); // This will execute the function this.getcarModel
You can also use the bind
method in browsers that support ES5.
$('#' + this.ID + ' .selMake').on('change', this.getCarModel.bind(this));
.on()
, not the result of a call!