JavaScript variables do not persist in jQuery event handler

Question

For some reason, I'm not understanding the scope of local and global variables with relation to jQuery click handlers. When I click the buttons, I'm getting "undefined", but I expect it to show the category of the button clicked. How do I address this?

I've setup an example to show my confusion. Fiddle here: http://jsfiddle.net/zvhsqeyn/

Simple html buttons:

<button class="hobbies">hobbies</button>
<button class="sledding">sledding</button>
<button class="personal">personal</button>
<button class="food">food</button>

Some javascript to handle the event where the buttons are clicked.

var GLOBAL_CATEGORIES = ['hobbies', 'sledding'];

$(window).load(function() { 
    var categories = ['personal', 'food'];

    // local categories
    for (var i = 0; i < categories.length; i++) {
        $('.' + categories[i]).click(function() {
            alert(categories[i]);
            return false;
        });
    }

    // Global categories
    for (var i = 0; i < GLOBAL_CATEGORIES.length; i++) {
        $('.' + GLOBAL_CATEGORIES[i]).click(function() {
            alert(GLOBAL_CATEGORIES[i]);
            return false;
        });
    }
});

Edit: After taking in the feedback, here is the properly working http://jsfiddle.net/zvhsqeyn/1/

Try just alerting `i` inside your loop and see what happens. That may give you an idea of what's actually going on. — brbcoding, Dec 22 '14 at 21:34
Why are you using `$(window).load(function(){...})` instead of jQuery `ready()` or simply `$(function({...}))`? — GriffeyDog, Dec 22 '14 at 21:49
@GriffeyDog maybe he wants to wait for the images to finish loading too. — Kevin B, Dec 22 '14 at 21:52

score 1 · Accepted Answer · answered Dec 22 '14 at 21:42

This has to do with the nature of closures.

// local categories
for (var i = 0; i < categories.length; i++) {
    $('.' + categories[i]).click(function() {
        alert(categories[i]);
        return false;
    });
}

You're assigning an anonymous function as the click handler for each of these buttons. That function has access to the variable i, because it's visible in the parent scope. However - by the time you click one of these buttons, your loop has long since finished, and the value of i is now equal to categories.length. There isn't any element there, so your click functions return undefined.

In general, it's not safe to rely on the value of index variables when assigning event handlers in a loop. As a workaround, you can use the jquery $.each function:

$.each(categories, function(index, value) {
    // local categories
    $('.' + value).click(function() {
        alert(value);
        return false;
    });
});

This works because it creates a separate closure for each click handler function.

score -2 · Answer 2 · answered Dec 22 '14 at 21:46

This is a very common ish problem and here is the explanation

If we follow the process through what you are doing is adding a click listener to the ith GLOBAL_CATEGORIES and then moving on to the next one. You do this until i is too big for the GLOBAL_CATEGORIES array.

You have to remember that i has only been set once and so now i is 1 more than the length of GLOBAL_CATEGORIES. This means that when the alert fires GLOBAL_CATEGORIES[i] is undefined because i is too big.

A better way to do this is with the jQuery each syntax like below

$.each(GLOBAL_CATEGORIES, function(i, category) {
    $('.' + category).click(function() {
        alert(category);
        return false;
    });
});

JavaScript variables do not persist in jQuery event handler

2 Answers2