Simple Closure Use Case Example

by Austin Anderson

HTML

<div>
works
</div><button id="button0">0</button>
<button id="button1">1</button>
<button id="button2">2</button>
<div>
doesn't work
</div>
<button id="button10">0</button>
<button id="button11">1</button>
<button id="button12">2</button>

JavaScript

//works
for (var i = 0; i < 3; i++) {
  (function(index){
    $('#button'+index).click(function(){
      foo(index);
    });
  })(i);
}

//does not work
for (var i = 0; i < 3; i++) {
  $('#button1'+i).click(function(){
    foo(i);
  });
}

function foo(val) {
  alert(val);
}