的onclick功能無法正常工作

隨着product_showcase.js文件我加載的內容轉換成HTML，然後使用類的即點擊產品鏈接的幫助內我想組織一個onclick事件爲顯示在product_description.js中數據從json文件中獲取。的onclick功能無法正常工作

我能夠正確加載數據到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>

來源

2016-09-11 Dhrub Kumar

http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements – naortor

@naortor我剛剛通過鏈接，你發佈之前，我問問題。問題是動態內容** onclick **函數必須使用，而不是**點擊**。在我的情況下，已經使用** onclick **仍然沒有發生點擊事件。 –

這是您添加事件的順序。 jQuery查詢元素，然後添加事件 - 因爲.inner尚不存在，事件不附加到任何東西。 – jtrumbull

我onclick事件是product_description.js添加事件監聽器文件，而onclick事件發生在product_showcase.htm l其中product_description.js文件未在腳本中提及。因此，無論

我不得不提product_showcase.html頁面或
傳遞的onclick功能代碼的product_showcase.js文件上。

來源

2016-09-11 06:53:00

您可以在父#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"); 
});

來源

2016-09-11 06:16:47 naortor

的onclick功能無法正常工作

回答

相關問題