Заказ привязки jQuery к элементам?

Question

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

Как я итерацию по каждому из пунктов JSON, я (editied для ясности):

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)).
Это также будет быстрее, потому что код будет обрабатываться один раз, а не один раз за клик.

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

EDIT: Ваш код можно переписать так:

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