Упорядочение привязки jQuery к элементам?

Question

У меня возникли сложности с использованием jQuery для привязки функции к элементу. В основном у меня есть набор div, которые я загружаю, используя JSON. Каждый из элементов JSON имеет ассоциированное «действие», которое определяет, какую функцию вызывать при нажатии на этот div.

Когда я перебираю каждый элемент JSON, я делаю (отредактировано для ясности):

for (var i = 0; i < JSONOBJECT.length; i++) {
   var divbox = $('<div id="' + i + '"><img /></div>');

   var action = JSONOBJECT[i]["action"];
   $(divbox).click(function () {
      eval(action); // bind function
   });

   $('.navigationarea').append(divbox); // Append to area
}

Так, например, JSONOBJECT[0]["action"] может содержать "doThis()", а JSONOBJECT[1]["action"] может содержать "doThis2()".

Проблема в том, что action всегда заканчивается действием, связанным с последним элементом в объекте JSON. Я знаю, что это проблема, связанная с локализацией переменной (или созданием копии?), Но мне ее не хватает.

Могу ли я получить помощь? Заранее спасибо.

Answer 1

Ваша проблема в том, что переменная action используется всеми анонимными методами.

В вашем конкретном случае лучшее решение - написать divbox.click(new Function(action)).
Это также будет быстреепотому что код будет анализироваться только один раз, а не один раз за клик.

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

РЕДАКТИРОВАТЬ : Ваш код можно переписать так:

for (var i = 0; i < JSONOBJECT.length; i++) {
    $('<div id="' + i + '"><img /></div>')
        .click(new Function(JSONOBJECT[i].action))
        .appendTo($('.navigationarea'));
}