Question

To begin with, I’m not even sure, if it is the right way to do it.

Let’s say, i have script (jquery included) like this:

foo = function() {

    this.bar = function() {
    alert('I\'m bar');
    }

    this.test = function() {
    $('body').append('<a onclick="my_var.bar();">Click me</a>');
    }

this.test();

}

var my_var = new foo();

Is there any way, i could make variable “my_var” dynamic inside function “foo”.
So I could do something like

$('body').append('<a onclick="'+the_variable_which_im_assigned_to+'.bar();">Click me</a>');

Thank you

//Edit:

I’m sorry if i wasn’t clear enough, because I’m not quite sure of what I’m trying to do myself.

My goal is to replace line

$('body').append('<a onclick="my_var.bar();">Click me</a>');

with

$('body').append('<a onclick="'+what_ever_should_go_here+'.bar();">Click me</a>');

So when i call

var my_var = new foo();
var your_var = new foo();
var our_var = new foo();

I would be able to call functions inside each object (after they append something into document body).

Answer 1

In addition to switching from the inline event handler, you’ll need to use a closure to access the Foo instance within the handler.

function Foo() {
    var self = this;
    this.test = function() {
        $('body').append(
            $('<button>something</button>').click(function () {
                self.bar(); return false;
        }));
    }
}