Issue with scope and/or click listener in Javascript/jquery

Question

I'm trying to work out a trivial issue:

var setListeners = function()
        {
            for(var i in sliders)
            {
                sliders[i].switchBtn.click(function()
                {
                    alert(i);
                });
            }
        }

There are three elements in sliders, so 3 switchBtn's are given a click listener. I expected that clicking the first button would alert with a '0', the second a '1' and the third a '2'. However when I press each button, I just get '2'.

Could someone please point out why the value of i is overridden for each new listener function?

alex · Accepted Answer · 2011-03-22 05:09:32Z

2

Use a closure so the internal i isn't always bound to outer scope (which will be the last value at the end of the loop).

Here the value of i is being set to j.

var setListeners = function()
    {
        for(var i in sliders)
        {
            sliders[i].switchBtn.click((function(j)
            {
                return function() { alert(j) };
            })(i);
        }
    }

jsFiddle.

edited Mar 22, 2011 at 5:09

answered Mar 22, 2011 at 4:55

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

user578895 Over a year ago

wow, you seriously just edited your post that you made first (and incorrectly) to copy mine character-for-character? wow...

alex Over a year ago

@cwolves No, actually, I was testing it on jsFiddle, the similarity is a coincidence I promise you. I've answered this type of question a few times before, so don't assume because I used similar code I stole it.

user578895 Over a year ago

k, sorry. timing was just bad since you edited it right after I posted :)

alex Over a year ago

@cwolves I noticed you gave the correct answer first. My first answer I forgot the pattern and I quickly remembered about the self invoking function so I went to fiddle to work it out (I try to test all my non trivial JavaScript code before I post it).

alex Over a year ago

@downvoter Thanks :) @cwolves Proof that I at least knew to answer it (sometimes my memory isn't as good as it should be) :)

|

score 0 · Accepted Answer · 2011-03-22 05:39:25Z

0

since i is outside of the function, you're always referencing the same variable and it's always 2. You need a closure to get this to work properly:

sliders[i].switchBtn.click((function(n){
   return function(){
      alert(n);
   }
})(i));

n (was i) is now bound in a closure and your alerts will show properly.

edited Mar 22, 2011 at 5:39

answered Mar 22, 2011 at 4:58

user578895

Collectives™ on Stack Overflow

Issue with scope and/or click listener in Javascript/jquery

2 Answers 2

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related