.click() callback references local variable from the calling method instead of copying by value

Question

The following jQuery Javascript code is included on an otherwise empty page.

var element;
$(function() {
  for (var i = 0; i < 10; i++) {
    element = $('<div>' + i + '</div>');
    element.click(function() {
      alert(i);
    });
    $('body').append(element);
  }
});

The desired behavior is that this code should generate 10 div elements numbered from 0 to 9. When you click on a div element, an alert popup will show the number of the div element you clicked on (i.e. if a user clicks on the div element labeled '4', the alert popup should show the number 4).

The alert popup instead shows the number 10 regardless of which div element is clicked on.

How can I modify this code to make it behave in the desired way?

Answer 1

You need to pass the variable as a function parameter.

For example:

function buildElement(i) {
    var element = $('<div>' + i + '</div>');
    element.click(function() {
        alert(i);
    });
    $('body').append(element);
}

$(function() {
    for (var i = 0; i < 10; i++) {
        buildElement(i);
    }
});

You can also do this with an inline anonymous function, like this:

$(function() {
    for (var i = 0; i < 10; i++) {
        (function(i) {
            var element = $('<div>' + i + '</div>');
            element.click(function() {
                alert(i);
            });
            $('body').append(element);
        })(i);
    }
});

Answer 2

Usually I hide the number in an id and get it out in some structured way:

$(function() {
    for (var i = 0; i < 10; i++) {
        element = $('<div id="id-'+i+'">' + i + '</div>');
        element.click(function() {
            alert($(this).attr('id').split('-')[1]);
        });
        $('body').append(element);
    }
});

Answer 3

You could do 1 of two things. You could use the contents of the div to output is or you could grab the index in the array from a selector.

This is an example for contents:

element.click(function() {
  alert($(this).text());
});

Or for the index:

element.click(function() {
  alert($('div').index(this));
});

I believe both should work