Question

在product_showcase.js文件的帮助下，我将内容加载到HTML中，然后使用即内部类点击产品链接，我正在尝试组织 onclick事件如product_description.js中所示数据从json文件中获取。

我能够正确地将数据加载到html中但是onclick函数没有运行。我查看了Google Chrome调试器。该程序正在运行onclick函数的第一行，它正在退出该函数。在控制台上没有发现错误。

注意：代码已经过简化，可以提问。

product_description.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 Page

<!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>

product_description.html Page

<!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>

Answer 1

您可以在父#electronics_products

上添加事件监听器

$('#electronics_products').on('click', function(e){
    if ($(e.target).attr('class') === 'inner') {
        console.log("still here");
    }
})

或

$('#electronics_products').on('click', '.inner', function() {
    console.log("still here");
});

Answer 2

我的 onclick事件位于 product_description.js 文件中，而onclick事件发生在 product_showcase.htm l，其中 product_description.js脚本中未提及文件。所以要么

我不得不在product_showcase.html页面或
将onclick功能代码传输到 product_showcase.js 文件。

Jquery中的Onclick函数不起作用

2 个答案: