在product_showcase.js 文件的帮助下，我将内容加载到 HTML 中，然后使用以下类单击产品链接即内在我正在尝试组织一个单击事件如product_description.js所示
数据是从 json 文件中获取的。
我能够将数据正确加载到 html 中，但 onclick 函数未运行。
我检查了 Google Chrome 调试器。该程序正在运行 onclick 函数的第一行，并且正在退出该函数。控制台上没有发现错误。
Note:该代码已被简化以方便提问。
产品描述.js 文件
$(document).ready(function() {
console.log("came back here");
$(".inner").on('click','.inner',function() {
console.log("still here");
var k1= $(this).attr("id");
var k= $('#' +k1).children('.inner').text();
console.log(k1);
console.log(k);
$.each(com_list, function(j) {
$.each(com_list[j], function(i) {
if (com_list[j][i]["product_name"]==k){
localStorage.setItem("product_name",com_list[j][i]["product_name"]);
localStorage.setItem("image",com_list[j][i]["image"]);
localStorage.setItem("price",com_list[j][i]["price"]);
localStorage.setItem("id",com_list[j][i]["id"]);
localStorage.setItem("brand",com_list[j][i]["brand"]);
console.log(localStorage.getItem("id"));
}
});
});
});
console.log(localStorage.getItem("product_name"));
var cart_obj = new Object();
// console.log(com_list[j][i]["id"]);
cart_obj.product_name=localStorage.getItem("product_name");
cart_obj.image=localStorage.getItem("image");
cart_obj.price= localStorage.getItem("price");
cart_obj.id=localStorage.getItem("id");
cart_obj.brand=localStorage.getItem("brand");
var description_id;
//code to be added in description page of every product
description_id= '<div class="col-sm-6 description_page"> <img src="' + cart_obj.image + '"></div><div class="col-sm-6 "><h4>' +
cart_obj.product_name +'</h4><h5>' + cart_obj.price +
'</h5> <button type="button" class="btn btn-default btn-large cart"><a href="shoppingbee_cart.html"> Add to Cart</a> </button></div >';
$("#products_description").append(description_id);
});
Product_showcase.js 文件
$(document).ready(function () {
product_details();
});
function product_details() {
var electronics_id;
for (var i = 0; i < com_list["electronics"].length; i++) {
electronics_id= '<div class="col-sm-4 product" id="e' + (i +1) +'"> <img src=" ' + com_list["electronics"][i]["image"] +
' "> <a href="shoppingbee_details.html" class="inner"> <p>' + com_list["electronics"][i]["product_name"] +
'</p></a> <p>' + com_list["electronics"][i]["price"] + '</p> </div>'
$("#electronics_products").append(electronics_id);
}
}
Product_showcase.html 页面
<!DOCTYPE html>
<html>
<head>
<title>ShoppingBee-Electronics Section</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../CSS/shoppingbee_login.css">
</head>
<body>
<div class="container-fluid">
<div class="col-sm-10" id="electronics_products">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../Javascript/product_showcase.js"></script>
<script src="../Javascript/com_list.json"></script>
</body>
</html>
产品描述.html 页面
<!DOCTYPE html>
<html>
<head>
<title>ShoppingBee</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../CSS/shoppingbee_login.css">
</head>
<body>
<div class="container-fluid">
<div id="products_description">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../Javascript/com_list.json"></script>
<script src="../Javascript/product_showcase.js"></script>
<script src="../Javascript/product_description.js"></script>
</body>
</html>
