jQuery – use for loop to bind events

Problem

Binding events in for loop with jQuery is not working. Here is example of not working code.

for(var i = 0; i < 5; i++){
    $("#selector"+i).click(function(){
        $("#selector"+i).hide();
    });
}

Reason

The problem is that the i variable is 5 in the moment of execution so the jQuery can’t select proper element.

Solution

The solution is to create an anonymous function and store the i variable into another one, that will last even after the loop ends.

Here is example of working code for binding click event in a for loop using anonymous function and jQuery.

for(var i = 0; i < 5; i++){
    // create the anonymous function
    (function(){
        // store the variable
        var j = i;

        // bind the event
        $("#selector"+j).click(function(){
            $("#selector"+j).hide();
        });
    }();
}