Question

Here are two samples of code. The first one does not work and the second one does, though I’m completely at a loss as to why. Can someone explain this?

[I’m writing a simple game using a bit of jQuery to be played in a webkit browser (packaged with Titanium later).]

In the first example, Firebug tells me that “this.checkCloud” is not a function.

function Cloud(){

    this.checkCloud = function(){
      alert('test');            
    }

    $("#"+this.cloudName).click(function(){
        this.checkCloud();
    });

}

…but then this works:

function Cloud(){

    this.checkCloud = function(){
      alert('test');            
    }

    var _this = this;

    $("#"+this.cloudName).click(function(){
        _this.checkCloud();
    });

}

This one works perfect.

Why does the first one not work? Is it because “this.checkCloud” is inside of the anonymous function?

Answer 1

in this example:

$("#"+this.cloudName).click(function(){
        this.checkCloud();
    });

this referrers to the element selected(jquery object).

what you can do is use private functions

var checkCloud = function(){
      alert('test');            
    }

this way you can simply call it inside your anonymous function

$("#"+this.cloudName).click(function(){
            checkCloud();
        });