How to access class variable inside of jquery event?

Question

If I'm inside a jQuery event, I'm not sure how I can access class variables. Example below

// <reference path="../typings/jquery/jquery.d.ts" />

export class Notes {

    // I want to access this inside of the click event
    test = "test";

    foo() {
        //works here
        alert(this.test);

        $("#testDiv").click(function () {

            // context of this changes so this no longer works
            alert(this.test);

            // How do I access the test variable in here?
        })
    }
}

Christoffer · Accepted Answer · 2013-05-08 17:17:13Z

If you use the lambda expression, it binds this to the enclosing scope's this.

export class Notes {
    private test: string = "test";

    foo() {
        //works here
        alert(this.test);

        $("#testDiv").click(() => {
            alert(this.test);
        })
    }
}

is translated into

var Notes = (function () {
    function Notes() {
        this.test = "test";
    }
    Notes.prototype.foo = function () {
        var _this = this;
        alert(this.test);
        $("#testDiv").click(function () {
            alert(_this.test);
        });
    };
    return Notes;
})();
exports.Notes = Notes;

Be careful however, inside the jQuery callback you will not be able to access the DOMElement as expected, since this is translated. If you want to be able to do both, add this to a variable in the closure yourself:

export class Notes {
    private test: string = "test";

    foo() {
        alert(this.test);
        var self = this;
        $("#testDiv").click(function() {
            alert(self.test);
            $(this).hide(); // still works
        })
    }
}

Kyle · Accepted Answer · 2013-05-08 17:14:49Z

3

I found a way that works however I feel like there is probably a better way?

export class Notes {
    test = "test";

    foo() {
        var self = this;

        $("#testDiv").click(function () {
            alert(self.test);
        })
    }
}

answered May 8, 2013 at 17:14

Kyle

34k43 gold badges142 silver badges193 bronze badges

Collectives™ on Stack Overflow

How to access class variable inside of jquery event?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related