JavaScript closures. Access in loop to current i, j variables [duplicate]

Answer 1

I would store the indexes as attributes and add a single click handler to the table :

var tableHtml = '';

for(var i=0; i<5; i++) {
    tableHtml += '<tr>';

    for (var j=0; j<5; j++) {
        tableHtml += '<td data-i="' + i + '" data-j="' + j + '"></td>';
    }

    tableHtml += '</tr>';
}

$('table').append(tableHtml).on('click', 'td', function(ev) {
    var i = this.getAttribute('data-i'),
        j = this.getAttribute('data-j');
});

Answer 2

Other option can be storing data within the elements.

  for(var i = 0; i < 5; i++)
  {
      var tr = $('<tr></tr>');
      for (var j = 0; j < 5; j++) 
      {
          var td = $('<td></td>');
          this.data("position",{row:i, column:j});

          td.click(function() 
          {
            var position = this.data("position");
            alert(position.row + ' ' + position.column);  // here I want to access to CURRENT i, j variables
          })

          td.appendTo(tr);
      }
  } 

Answer 3

The other answers mostly explain how to fix the closure problem, although such methods are not particularly memory efficient since they end up creating a new closure for each possible combination of i and j.

However, since you're using jQuery you have a number of other options available to you:

Pass data parameters to the .on call

td.on('click', { i: i, j: j }, function(event) {
    var i = event.data.i;
    var j = event.data.j;
    alert(i + ' ' + j);
});

The i and j values as you can see above will be available in event.data

Use $.each to iterate instead of a for

$.each(Array(5), function(i) {
    // i is already bound here because it's a function parameter
    $.each(Array(5), function(j) {
        // and j available here
        td.on('click', ...);
    });
});

Use event delegation instead of a per-element handler

$('#myTable').on('click', 'td', function() {
    // use jQuery methods to determine the index, e.g.
    var j = this.cellIndex
    var i = this.parentNode.rowIndex
    ...
});

which is more efficient than binding a separate handler to each <td> individually.

and more generically, use .data() to store per-cell information

You can store data values directly on elements, which would work very well if you wanted to retrieve values other than the cell and row indexes:

td = $('<td>').data({i: i, j: j});

and then extract these row and column values directly from the clicked element's .data:

for (var i = 0; i < 5; i++) {
    var tr = $('<tr></tr>');
    for (var j = 0; j < 5; j++) {
        $('<td></td>').data({i: i, j: j}).appendTo(tr);
        td.appendTo(tr);
    }
}

$('#myTable').on('click', 'td', function() {
    var data = $(this).data();
    var i = data.i;
    var j = data.j;
    alert(i + ' ' + j);
});

Answer 4

Introducing them into a new scope will capture their current value:

(function(i, j) {
    td.click(function() {
        alert(i + ' ' + j);  // here I want to access to CURRENT i, j variables
    });
})(i, j);

Answer 5

You can create a new scope for the 'current' value of (i, j) by executing a function inside the loop like this

td.click((function (i, j) {
    return function (event) {
        console.log(i, j);
    }
})(i, j));

You could make this a little more succinct by using Function.prototype.bind

td.click(function(i, j, event){
  console.log(i, j);
}.bind(td, i, j));

Note This .bind solution requires ECMAScript 5, so if you want to support older browsers, please look into es5-shim

---

See this demo