Question

I am trying to assign a series of objects stored in an array to jquery click event handlers.

The problem is , when the event fires, I only ever references the last object in the array.

I have put together a simple example to show the problem:

function dothis() {
    this.btns = new Array('#button1', '#button2');
}

// Add click handler to each button in array:
dothis.prototype.ClickEvents = function () {

    //get each item in array:
    for (var i in this.btns) {

        var btn = this.btns[i];
        console.debug('Adding click handler to button: ' + btn);

        $(btn).click(function () {
            alert('You clicked : ' + btn);
            return false;
        });
    }
}

var doit = new dothis();
doit.ClickEvents();

The HTML form contains a couple of buttons:

<input type="submit" name="button1" value="Button1" id="button1" />
<input type="submit" name="button2" value="Button2" id="button2" />

When button1 is clicked, it says “You clicked #Button2”

It seems that both button click handlers are pointing to the same object inside var btn.

Considering the variable is inside the for loop, I cannot understand why.

Any ideas?

Answer 1

You need a function factory to close the loop variable, such as this:

//get each item in array:
for (var i=0; i<this.btns.length; i++) {

    $(this.btns[i]).click(function(item) { 
        return function () {
            alert('You clicked : ' + item);
            return false;
        }
    }(this.btns[i]));

}

Another good option is to let jquery help you. Use jQuery.each(). The variable btn here is local to the handler function, and so isn’t reused between iterations. This allows you to close it and have it keep its value.

$.each(this.btns, function() {
    var btn = this;
    $(this).click(function () {
        alert('You clicked : ' + btn);
        return false;
    }
});