Typescript this keyword not working in a jquery event handler

Question

My typescript code.

class something {
    createSomething(): JQuery {
        let result = $('<div>');
        $('<input>').on('change paste keyup', () => {
            this.myProperty = $(this).val;
            this.change();
        }).appendTo(result);
        return result;
    }
    myProperty: string;
    change() {
        alert('yeah');
    } }

In the handle function-> this and $(this) can't exist in same time.

How can I resolve the problem?

Answer 1

Maybe do a more classic javascript way could solve it, together with function instead of arrow-function.

    var that = this;
    $('<input>').on('change paste keyup', function() {
                that.myProperty = $(this).val;
                that.change();
            }).appendTo(result);

Answer 2

This may help

createSomething(): JQuery {
    var self = this;
    let result = $('<div>');
    $('<input>').on('change paste keyup', () => {
        self.myProperty = $(this).val;
        self.change();
    }).appendTo(result);
    return result;
}