jQuery - access variable out of a jQuery function

Question

guys. I have something like this:

myThing = {
    str:"my string",
    setClick: function(){
        $("button").click(function(){
            alert(this.str);
        });
    }
}

myThing.setClick();

The problem is when I click the button the function doesn't know what str is. alert(str) gives me an error (str is not defined) and no alerts. alert(this.str) gives me the alert but containing undefined.

I can see that this reffers to the button and the button doesn't have any attribute called str. So how can I access the str that is out of jQuery's function?

João Silva · Accepted Answer · 2012-08-24 13:26:17Z

5

Save a reference to this in setClick, outside the click event handler:

myThing = {
    str:"my string",
    setClick: function() {
        var self = this;
        $("button").click(function() {
            alert(self.str);
        });
    }
}

DEMO.

answered Aug 24, 2012 at 13:26

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

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

Comments

adeneo · Accepted Answer · 2012-08-24 13:26:07Z

3

You can always reference the object by name

myThing = {
    str:"my string",
    setClick: function(){
        $("button").click(function(){
            alert(myThing.str);
        });
    }
}

myThing.setClick();

answered Aug 24, 2012 at 13:26

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

jackwanders · Accepted Answer · 2012-08-24 13:31:16Z

You can force the context of a function using the javascript function bind. I find it can be useful in situations such as this. It lets you define the value of this within the function being bound.

myThing = {
    str:"my string",
    setClick: function(){
        $("button").click(function(e){
            // 'this' is myThing
            // $(e.currentTarget) is the button on which the event handler was attached
        }.bind(this));
    }
}

myThing.setClick();

Collectives™ on Stack Overflow

jQuery - access variable out of a jQuery function

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related