Onclick function in Jquery is not working

Question

With the help of product_showcase.js file I am loading content into HTML and then on clicking the product link using the class of i.e inner I am trying to organize an onclick event as shown in product_description.js Data is fetched from a json file.

I am able to load data correctly into html but onclick function is not running . I checked into Google Chrome debugger. The program was running the first line of onclick function and it was exiting the function. No errors were found on console.

Note: The code has been simplified for asking questions.

product_description.js File

   $(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 File

    $(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>

@naortor I just went through the link which you posted before I asked question. The problem was for dynamic content onclick function has to be used instead of click. In my case already onclick is used still the click event is not happening. — Dhrub Kumar
– Dhrub Kumar, Commented Sep 11, 2016 at 6:10
It's the order in which you are adding the event. jQuery queries the elements then adds the event -since .inner does not exist yet, the event is not attached to anything. — jtrumbull
– jtrumbull, Commented Sep 11, 2016 at 6:11
You can change the order in which the files are loaded or use the selector option i.e. $('a').on('click', '.inner', callback) — jtrumbull
– jtrumbull, Commented Sep 11, 2016 at 6:15

naortor · Accepted Answer · 2016-09-11 06:16:47Z

4

You can add the event listener on the parent #electronics_products

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

or

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

answered Sep 11, 2016 at 6:16

naortor

2,09714 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dhrub Kumar · Accepted Answer · 2016-09-11 06:53:00Z

0

My onclick event is in product_description.js file while onclick event was happening on product_showcase.html where product_description.js file was not mentioned in script. So either

I had to mention that on product_showcase.html page or
transfer the onclick function code to the product_showcase.js file.

answered Sep 11, 2016 at 6:53

Dhrub Kumar

1059 bronze badges

Collectives™ on Stack Overflow

Onclick function in Jquery is not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related