Question

Can anyone tell me why this works:

$("#test1 td").click(function(event) {
  $("#test1").addClass("tableRowSelected");
});
$("#test2 td").click(function(event) {
  $("#test2").addClass("tableRowSelected");
});

But this doesn’t:

for(var i = 1; i < 3; i++) {
  $("#test" + i + " td").click(function(event) {
    $("#test" + i).addClass("tableRowSelected");
  });
}

I’ve also tried using i.toString() in the second code snippet but this doesn’t help 🙁

Answer 1

The event handler function receives an enduring reference to the i variable, not a copy of it as of when it was created. See this other answer for details.