Question

I have a class Foo, with a method that generates HTML that is displayed. I want the HTML to have an onclick event handler that calls Foo.clickHandler. The problem is that I don’t know what this particular instance of Foo is named. Likewise, the onclick event has no way of knowing how to access this instance of Foo. Here is some code:

function Foo(){
    this.nonStaticVariable='Something non-static (different for every instance of Foo).';
    this.getHTML=function(){
        return '<a href="javascript:void(0);" onclick="/* How do I call Foo.clickHandler? */">Click Me!</a>';
    }
    this.clickHandler=function(){
        alert(nonStaticVariable);
    }
}

The point of the non-static function is to show that the onclick needs to call the correct instance of Foo.

I have thought about passing a string to Foo that contains the variable name that contains Foo, but this seems anti-OOP:

function Foo(container){
    this.container=container;
    this.nonStaticVariable='Something non-static (different for every instance of Foo).';
    this.getHTML=function(){
        return '<a href="javascript:void(0);" onclick="'+container+'.clickHandler();">Click Me!</a>';
    }
    this.clickHandler=function(){
        alert(nonStaticVariable);
    }
}

var fooInstance=new Foo('fooInstance');

What do you suggest?

I am open to jQuery solutions as well.

Answer 1

Do nonStaticVariable and clickHandler need to be accessible outside of Foo? If not, you could simply do something like this:

function Foo(){
    //changed these to private variables only accessible from within Foo
    var nonStaticVariable='Something non-static (different for every instance of Foo).';
    var clickHandler = function(){
        alert(nonStaticVariable);
    }
    this.getHTML=function(){
        return $('<a href="#">Click Me!</a>').click(clickHandler);
    }
}


var fooInstance = new Foo();

var button = fooInstance.getHTML();


$("#container").html(button);​