Javascript and JQuery "this" scope errors

Question

A sample bit of code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<div id="myinfo">info</div>
<input id="clickme" type="button" value="click here to display info"/>

<script type="text/javascript">
    function Fighter() {
        this.name = "Kenny";    // fighters name
        this.hp = 10;           // fighters hp
        this.getHP = function() {
            return this.hp;
        }

        this.getName = function() {
            return this.name;
        }

        this.initUpdateButton = function(button_id) {
            $(button_id).click(function() {
                $("#myinfo").html("Name: "+this.getName()+"<br/>HP:"+this.getHP()); 
                // this.getName is undefined
            });
        }

    };

    var me = new Fighter();
    alert("Name: "+me.getName()+"<br/>HP:"+me.getHP()); // works properly
    me.initUpdateButton("#clickme"); // bind it to some ID
</script>

Simply put, given a JavaScript class with JQuery mixed in, I understand that on the callback for JQuery functions (i.e. $.click()), that this is referring to the object that was clicked and Not the Class or root function(). so this.getName() and this.getHP() don't work.

But what is the best way to get around this problem?

I saw some similar posts but they weren't of use to me so sorry if this is a repost and thanks in advance.

Is it really useful to have getter methods when your properties are public ? :) — Golmote Kinoko
– Golmote Kinoko, Commented Sep 23, 2010 at 2:57
Right, my actual implementation is not as simple as the example I whipped up for SO — Kenny Cason
– Kenny Cason, Commented Sep 23, 2010 at 3:34

Matthew Flaschen · Accepted Answer · 2010-09-23 00:59:33Z

2

this.initUpdateButton = function(button_id) {
            var self = this;
            $(button_id).click(function() {
                $("#myinfo").html("Name: "+self.getName()+"<br/>HP:"+self.getHP()); 
            });
        }

answered Sep 23, 2010 at 0:59

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

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

1 Comment

Kenny Cason Over a year ago

oh wow. so simple. a definite sign that I should sleep a bit more before coding :-/ Thanks!

Collectives™ on Stack Overflow

Javascript and JQuery "this" scope errors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related