Using variables in dynamically attached jQuery events

Question

I'm trying to use a variable inside a dynamically added jQuery event. When I run this, I keep getting "The number is 3" for each div when I click.

$( document ).ready(function() {

    for (var i = 0; i < 3; i++) {

        var html = $('<div>Click Me</div>');

        html.on('click', function(){

            console.log( 'The number is ' + i );
        });

        $('body').append(html);

    }

});

Answer 1

$( document ).ready(function() {
    for (var i = 0; i < 3; i++) {
        var html = $('<div>Click Me</div>');

        (function(index) {
            html.on('click', function(){
                console.log( 'The number is ' + index );
            });     
        })(i);

        $('body').append(html);
    }
});