Jquery 中的 onclick 功能无法正常工作

Question

在 product_showcase.js 文件的帮助下，我将内容加载到 HTML，然后使用 的 class 单击产品 link 即inner 我正在尝试组织一个 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页数

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

<!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.html 其中 product_description.js 文件未在脚本中提及。所以要么

我不得不在 product_showcase.html 页或
将onclick功能代码转移到product_showcase.js文件中。

Jquery 中的 onclick 功能无法正常工作

Onclick function in Jquery is not working

html

javascript

jquery