How do i bind multiple events to several elements using the for loop in JS?

Question

hai. I have been learning jS lately. How do i bind multiple events to several elements using a loop? Here is an example of what i am trying to do. Lets say i have several divs with the ids $box1, #box2, #box3 ... #box9 etc. why doesnt this work? ( im using jquery ).

for (var i; i<8; i++){
    $('#box' + i).click(function(){alert('hai')});
}

I know that i can do the same thing instead like this:

$('div').each(function(){
    $(this).click(function(){alert('hai')});
});

However i d like to know why the first code snippet wouldnt work as i intended it to.

As a side note, creating functions within a loop is not a good idea. You should declare the function as a variable before the loop. Better yet, you should define a common class for all the elements that have the same onclick behaviour and use a class selector instead. — Aleksi Yrttiaho
– Aleksi Yrttiaho, Commented Feb 20, 2011 at 20:43

David Hellsing · Accepted Answer · 2011-02-20 20:37:52Z

1

In javascript, simply defining a variable using var i; doesn’t make it zero and "loopable".

So you simply need to assign a number to the i variable.

for (var i = 0;

Also note that you can’t know what i is inside the callback due to JavaScript closure.

edited Feb 20, 2011 at 20:37

answered Feb 20, 2011 at 20:31

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

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

Collectives™ on Stack Overflow

How do i bind multiple events to several elements using the for loop in JS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related