Как я неправильно понимаю разрешение закрытия JavaScript в этом примере?

Question

Мне показалось, что я понимаю замыкания JavaScript, но, похоже, я не понимаю. Возьми следующую выдержку из моего кода:

for(var i=0; i<data.List.length; i++) {
    var entry = data.List[i]; // I thought this line should have resolved the issue?
    $('<tr class="logs-list-item"><td class="lefticon nowrap"><a href="javascript:void(0)"></a></td><td class="right nowrap"></td></tr>')
        .appendTo(tbody)
        .find('a').text(entry.Text)
        .click(function() {
            alert(entry.Text + ' ' + entry.Filename);
            showLog(id, entry.Filename);
        })
        .closest('tr').find('td:last').text(entry.When);
}

Как видите, мы перебираем список записей имени файла и добавляем строку таблицы для каждой записи с небольшим количеством текста, описывающего файл, и обработчик onclick для каждой записи, которая должна вызывать функцию showLog() с подробной информацией о выбранном имени файла.

На самом деле происходит из-за того, что все строки добавляются правильно, но каждой из них назначается обработчик для последнего элемента в списке.

В строке # 2 я определяю переменную внутри цикла for и получаю доступ к этой переменной в замыкании, но в конечном итоге она, похоже, не разрешается правильно, когда функция на самом деле вызывается.

Есть идеи, что я делаю не так?

Answer 1

В Javascript отсутствует область видимости на уровне блока.
Даже если переменная определена внутри цикла, она все еще используется совместно.

Вам необходимо переместить тело цикла в отдельную функцию.

Answer 2

Чтобы это работало, вам нужно использовать что-то вроде этого:

for(var i=0; i<data.List.length; i++) {
    (function(entry){
        // your code goes here
    })( data.List[i] );
}

Answer 3

Можете ли вы попробовать этот код, пожалуйста?

function generateClickHandler(entry) {
  return function() {
    alert(entry.Text + ' ' + entry.Filename);
    showLog(id, entry.Filename);
  }
}


..click(generateClickHandler(entry))...