Динамически загружаемая функция onclick, использующая данные функции

Question

Хорошо, мое кодирование немного слабое, но я учусь. У меня есть код Двойники к

$.post("test.php", {"data":"data"}, function(grabbed){ 
    $.each(grab, function(i, item){ 
     var place = document.getElementById("div"); 
     var para = createElement("p"); 
     para.innerHTML = item.name; 
     para.onclick = function(){ 
      document.getElementById(?para?).innerHTML = ?item.price?; 
     } 
     place.appendChild(para); 
    }); 
}, "json"); 

Мой вопрос, как я использовал бы сказать, item.price в функции OnClick. Я еще не пытался, но я уверен, что ссылка на данные, полученные из запроса, не будет работать в динамически загруженной функции onclick.

Моя функция работает несколько иначе, но основной принцип здесь. Любой совет будет оценен, или, может быть, кто-то может указать мне в правильном направлении.

Я думал о назначении идентификаторов div или para и как-то использовать их в функции. Я также думал об использовании файлов cookie для хранения данных, которые я хочу, но я не могу понять это. Есть что-то еще, что мне нужно знать или попробовать.

Answer 1

Ваш вопрос касается концепции closures в JavaScript.

Закрытие - это функции, относящиеся к независимым (свободным) переменным. В другими словами, функция, определенная в замыкании, «запоминает» среду , в которой она была создана.

Рассмотрим следующий фрагмент кода:

var foo = (function(){ 
    var remembered = "yea!"; 

    return function(){ 
     console.log("Do you remember? - " + remembered); 
    }; 
})(); 

foo(); // prints: Do you remember? - yea! 

Это сказал, глядя на ваш код:

... 
// the function assigned to `onclick` should remember 
// the variable `item` in the current context. 
para.onclick = function(){ 
    document.getElementById(?para?).innerHTML = ?item.price?; 
} 
... 

Это работает так как вы используете JQuery-х $.each() для итерации. И here демонстрация: http://jsfiddle.net/55gjy3fj/

Однако, если вы делаете итерации с равниной для цикла, вы должны обернуть обработчик внутри другого закрытия:

var getHandler = function(para, item){ 
    return function(){ 
     document.getElementById(the_id_here).innerHTML = item.price; 
    }; 
}; 
para.onclick = getHandler(para, item); 
... 

This fiddle демонстрирует точка: http://jsfiddle.net/63gh1gof/

Here's скрипку, который суммирует оба случая:

Answer 2

Поскольку вы уже используете JQuery, это может быть прекрасная возможность для г et, введенный в .data(). Используйте его, чтобы сохранить произвольный объект в элементе dom, а затем ссылаться на него позже в onclick-listener.

var para = $('<p/>').html(item.name).data('item', item); 
para.click(function() { 
    $(this).data('item') // item!!! 
}); 
$('#div').append(para); 

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

Просто прикрепить обработчик события к родительскому элементу:

$('#div').on('click', 'p', function() { 
    $(this).data('item') // item!!! 
});