Question

Possible Duplicate:
Javascript closure inside loops – simple practical example

I have an array of 4 objects (that.pairs), and each object has a .t property which is a jQuery object/element. I’m trying to set an event on each t being clicked.

The problem is that when one of the them gets clicked, it’s always the last pair (index 3) that gets passed into my doToggle() function.

Why is this happening? How can I fix it?

for (var i = 0; i < that.pairs.length; i++) {
    var p = that.pairs[i];
    p.t.click(function() {
        that.doToggle(p);
    });
}

Answer 1

Use $.each instead of a for loop so that you get a new variable scope with each iteration.

$.each(that.pairs, function(i, p) {
    p.t.click(function() {
        that.doToggle(p);
    });
});

This way each click handler closes over a unique variable scope instead of the shared outer variable scope.