How do I access member variables inside of an event in Javascript

Question

I have the following javascript:

var testObj = function() {
    this.test1 = "123";
}


testObj.prototype = {
    myFunc: function() {
        var input = $('<input type=button value="clickme" />');
        $('body').append(input);
        input.click(function () {
            alert(this.test1);
        });
    }
}

$(document).ready( function() {
    var t = new testObj();
    t.myFunc();
});

I know why the alert statement is showing undefined, but how do I make it show the actual value of test1 variable.

jsFiddle has the sample code.

Huangism · Accepted Answer · 2014-04-02 13:33:05Z

2

You can do this

http://jsfiddle.net/33Mtu/7/

myFunc: function() {
    var self = this;
    var input = $('<input type=button value="clickme" />');
    $('body').append(input);
    input.click(function () {
        alert(self.test1);
    });
},

When you say this inside the click function, this refers to the clicked item. I set self to this so you can safely use self inside the click function

answered Apr 2, 2014 at 13:33

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

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

Comments

kpull1 · Accepted Answer · 2014-04-02 13:37:10Z

1

Try to create a reference to the object to access it, this on an event refers to the sender:

 myFunc: function() {
        var input = $('<input type=button value="clickme" />');
        $('body').append(input);
        var obj = this;
        input.click(function () {
            alert(obj.test1);
        });

answered Apr 2, 2014 at 13:37

kpull1

1,66315 silver badges19 bronze badges

Comments

kalinowski · Accepted Answer · 2014-04-02 13:35:27Z

0

    var testObj = function() {
    test1 = "123";
}


testObj.prototype = {
    myFunc: function() {
        var input = $('<input type=button value="clickme" />');
        $('body').append(input);
        input.click(function () {
            alert(test1);
        });
    }
}

$(document).ready( function() {
    var t = new testObj();
    t.myFunc();
});

answered Apr 2, 2014 at 13:35

kalinowski

1136 bronze badges

Collectives™ on Stack Overflow

How do I access member variables inside of an event in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related