4

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>
Dhrub Kumar
  • 105
  • 8
  • http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements – naortor Sep 11 '16 at 06:06
  • @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 Sep 11 '16 at 06:10
  • 2
    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 Sep 11 '16 at 06: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 Sep 11 '16 at 06:15

2 Answers2

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");
});
naortor
  • 2,019
  • 12
  • 26
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.
Dhrub Kumar
  • 105
  • 8