動的に接続されたjQueryイベントで変数を使用する

Question

動的に追加されたjQueryイベント内で変数を使用しようとしています。私がこれを実行するとき、私はクリックすると、各divの "The number is 3"を取得し続けます。

$(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); 
    } 
});