[pensill]

Хелп.
Имеется следующее:
При загрузке страницы загружается информация по товарам из JSON (это реализовано)

var request;
  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
  } else {
    request = new ActiveXObject("Microsoft.XMLHTTP");
  }
  request.open('GET', 'js/info.json');
  request.onreadystatechange = function() {
    if ((request.readyState===4) && (request.status===200)) {
        var items = JSON.parse(request.responseText);

        for (var key in items) {
          var output = '<div class="goods__item" id=' + key + '>';
          output += '<img class="goods__img" src="img/' + items[key].url_small +'.jpg" />';
          output += '<div class="goods__info">';
          output += '<h2 class="goods__h2">' + items[key].name + '</h2>';
          output += '<div class="goods__desc">' + items[key].short_desc + '</div>';
          output += '</div>';
          output += '</div>';

          $('#goods_container').append(output);    // ЗАГРУЗКА ТОВАРОВ ИЗ JSON ПРИ ЗАГРУЗКЕ СТРАНИЦЫ (для каждого товара создается div своим ip (ip равен key))


          $('#' + key ).bind('click',  function(){
            console.log(items);  // в консоль выводятся нормально все объекты
            var out = '<ul class="result">';
                
                
                  out += '<p>' + items[key].name + '</p>';
                out += '</ul>';

            $('#update').html(out);  /// проблема с этой частью кода. Мне нужно реализовать, чтобы при щелчке по divу (тому диву который равен key ) с определенным товаром, выводилось в модальное окно вся информация о товаре, у меня сейчас загружается данные о последнем товаре в файле JSON
          });
        }
          
        }
      }
request.send();

И еще, правильно ли я делаю что использую .bind для отслеживания щелчка - так как на момент загрузки страницы этих divов нету