Get a variable inside an event function of a jquery plugin

Question

I've developed a plugin using jQuery for my project. In this plugin I use a slider plugin which initialize when my plugin is initialized. I assign it to a public variable in the plugin. And there is an event bound to an element which get's fired when the user enters some amount. basically, the slider changes according to the value entered in the input element. But the problem is, the variable which I assigned the slider is undefined when the keyup event get fired. How can I fix this.

inti method

var init = function() {
        plugin.settings = $.extend({}, defaults, options);

        set_default_values();

        this.slider = $(plugin.settings.sliderElements).slider();

        $(plugin.settings.sliderElements).on("slide", plugin.settings.onPluginSlide);
        $(plugin.settings.numOfMonthsKey).on("keyup", function(e){
            plugin.settings.onMonthKeyEnter(e,this.slider);
        });
}

the events

var defaults = {
        sliderElements: '#numOfMonths', //comma seperated jquery selectors
        perMonthAmountElement: '.perMonth',
        numOfMonthsElements: '.numOfMon', //comma seperated jquery selectors
        sumOfRecItemElement: '.sumOfRecItems',
        monthlyCostElement: '.monthlyCost',
        oneTimeFeeElement: '.oneTimeFee',
        nextInvoiceAmountElement: '.nextInvoiceAmount',
        numOfMonthsKey: '.numOfMonthsKey',
        oneTimeFee : 0,
        sumOfRecurringItems : 0,
        interestRate: 0.2,
        currency : 'kr', //This is just to display 
        onPluginSlide: function(sliderEvent){
            $(plugin.settings.numOfMonthsElements).text(sliderEvent.value);
            $(plugin.settings.perMonthAmountElement).text(calc_compound_interest_rate(plugin.settings.oneTimeFee,plugin.settings.interestRate,sliderEvent.value));
            $(plugin.settings.monthlyCostElement).text(plugin.settings.sumOfRecurringItems + amount_per_month(sliderEvent.value));
        },
        onMonthKeyEnter: function(keyEvent,slider){
            slider.slider('setValue', keyEvent.getCurrentTarget.value ,true)
        }
    }

How can I access the slider object after plugin initialization. I thought of using a window variable bt I have no idea whether it's good or bad.

Any help would be appreciated.

score 4 · Accepted Answer · edited May 23 '17 at 11:50

The context of 'this' keyword changes inside the event. Using 'this' keyword can be a bit confusing in JavaScript, I would recommend reading the following answer - How does the "this" keyword work? .

I would avoid using a window (global) variable, they can easily conflict with other JavaScript libraries you might be using/use in the future.

You could try making a self variable (or whatever other name you think is appropriate) in your init function instead, and us that in place of 'this' keyword. This will avoid the issue of 'this' keyword having a different value depending on context, your self variable will always be the same.

var init = function() {
    var self = this;
    self.slider = $(plugin.settings.sliderElements).slider();

    $(plugin.settings.numOfMonthsKey).on("keyup", function(e){
        plugin.settings.onMonthKeyEnter(e,self.slider);
    });
};

Get a variable inside an event function of a jquery plugin

1 Answers1