jquery event propogation problem
in Using jQuery
•
8 years ago
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));
}
}
1