Typescript Uncaught TypeError: is not a function when calling function from jquery event handler

Question

New to typescript, trying to figure out why this doesn't work:

I have the following class definition:

class SliderRange {

    updateSliderText(lowId: JQuery, highId: JQuery) {
        //do some updates
    }

    constructor(public uiId: string, lowDisplay: JQuery, highDisplay: JQuery) {
        //register the events that tie ui to the set methods here.
        this.primaryUi().on("input", function () {
            this.updateSliderText(lowDisplay, highDisplay);
        });

        this.secondaryUi().on("input", function () {
            this.updateSliderText(lowDisplay, highDisplay);
        }); 
    }

    private primaryUi() : JQuery {
        return $(`.original#${this.uiId}`);
    }
    private secondaryUi(): JQuery {
        return $(`.ghost#${this.uiId}`);
    }
}

The events are being fired correctly, but when they are fired, the browser complains that this.updateSliderText is not a function. Looking in the browser, this isn't being replaced by Typescript, and is instead referencing the JQuery object (primaryUi or secondaryUi). Yet IntelliSense correctly navigates to the proper updateSliderText function, which makes me believe that it should compile into javascript that correctly references that function.

How do I reference a function belonging to the class in the jquery event handlers?

Thank you.

If you don't use this, only use updateSliderText(lowDisplay, highDisplay), what is happened? — Tony Dong
– Tony Dong, Commented Feb 17, 2017 at 0:19
@TonyDong TS2304 Cannot find name 'updateSliderText' ts compilation error. — Kolichikov
– Kolichikov, Commented Feb 17, 2017 at 0:21

Jorge Fuentes González · Accepted Answer · 2017-02-17 00:19:25Z

5

The this context where you are calling your this.updateSliderText is wrong.

You need an arrow function (they were invented exactly for this reason) or do it the old style, by binding it:

this.primaryUi().on("input", () => { // Yay, cool arrow functions.
    this.updateSliderText(lowDisplay, highDisplay);
});

this.primaryUi().on("input", (function() {
    this.updateSliderText(lowDisplay, highDisplay);
}).bind(this)); // yay...? old-bind-style

The cool and TypeScript method is the arrow one.

answered Feb 17, 2017 at 0:19

Jorge Fuentes González

11.9k4 gold badges48 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kolichikov Over a year ago

Cool, that's exactly what I'm looking for! Do you have a link or a name that I can use to google this functionality of the arrow?

Jorge Fuentes González Over a year ago

Yeah, that's their name. Arrow functions: basarat.gitbooks.io/typescript/content/docs/…

Collectives™ on Stack Overflow

Typescript Uncaught TypeError: is not a function when calling function from jquery event handler

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related