Hi,

first time poster here and jQuery rookie, can anybody help me with this problem?

Everything works correctly until I try and add the click event on productList function. The productList click event is instead firing on the page load instead of when I click the .product element (so instead of displaying a larger version of the product, it cycles through the array of images that are returned from the ajax request.

 $.ajax({
  type: "GET",
  url: "db/products-for-scrolling.json",
  data: data,
  success: function (data) {
   var $content = $.parseJSON(data);
   $.each($content.slice(start, end), function (i, item) {
    productList(item);
   });
  }
 });

 function productList(item) {
  var img = "<img src='http://g.nordstromimage.com/imagegallery/store/product/medium/" + item.image_url + ".jpg' />";
  var name = "<h1>" + item.name + "</h1>";
  product = $("<div class='product'>" + name + img + "</div>");    
  $("#product-list").append(product);

  $("#product-list").on("click", ".product", displayImage(item));
 }