jQuery: Set click from array loop

Question

I have a series of divs in a pattern of header/body, where a click on the header will show the body in question.

This all happens with .click initialized on page ready..

Answer 1

Check the scope of your "Area" variable. You're basically assigning a global variable so on the last iteration "Area" is scoped outside of the loop.

Answer 2

Yes, I have run into this problem all too often. Area is a global variable since it does not have var before it. Also, don't use a for...in construct.

But you might still run into a similar problem. God knows how many scripts I've debugged because of a similar bug. Doing the following guarantees proper scoping:

var Areas = ['ping','http', 'smtp', 'pop3'];

for( var i = 0; i < Areas.length; i++ ){
  (function(area) {
    $(area).click(function(){ alert(area); /* ShowArea(area); */ });
  })(Areas[i]);
}

Answer 3

be sure that you added the click event handling after the DOM has been loaded you can include this on the head element:

var Areas = ['ping','http', 'smtp', 'pop3'];

$(document).ready(function() {
    $.each(Areas, function(i, v){
        var Area = '#show_fold_' + v;
        $(Area).click(function() {
            alert(Area);
        });
    });
}

Answer 4

It's a JavaScript thing; it's not jQuery related. What you're doing is creating a closure, but you're not understanding properly how they work.

You might want to read up on http://blog.morrisjohns.com/javascript_closures_for_dummies, especially Examples 5, 6, and 7.