在JQuery中的Onclick函数不起作用 [英] Onclick function in Jquery is not working
本文介绍了在JQuery中的Onclick函数不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在product_showcase.js文件的帮助下，我将内容加载到HTML中，然后使用类内部类单击产品链接。我尝试组织一个 onclick事件 strong>，如product_description.js中所示
数据从json文件中获取。
我可以正确地将数据加载到html中，但onclick函数未运行。
我登录Google Chrome调试器。该程序运行onclick函数的第一行，它正在退出函数。
注意：代码已被简化为提出问题。
product_description.js文件
$（document）.ready（function（） {
console.log（回到这里）;
$（。inner）。on（'click'，'。inner'，function（）{
console.log（still here）;
var k1 = $（this）.attr（id）;
var k = $（'＃'+ k1）。 （'。inner'）。text（）;
console.log（k1）;
console.log（k）;
$ .each（com_list，function（j）{$ （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（ 价格，com_list [J] [I] [ 价格]）;
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;
//在每个产品的描述页中添加代码
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 =buttonclass =btn btn-default btn-large cart>< a href =shoppingbee_cart.html>加入购物车< / a> < / button>< / div>';
$（＃products_description）。append（description_id）;
}）;
product_showcase.js文件
$（document）.ready（function（）{
$ b $ product_details（）;
}）;
函数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.htmlclass =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部分< / title>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
< link rel =stylesheettype =text / csshref =../ CSS / shoppingbee_login.css>
< / head>
< body>
< div class =container-fluid>
< div class =col-sm-10id =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 =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
< link rel =stylesheettype =text / csshref =../ 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>
解决方案
我的 onclick事件在 product_description.js 文件中，而onclick事件发生在 product_showcase.htm 上，其中 product_description.js 文件未在脚本中提及。因此，无论是在product_showcase.html页面还是
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>
解决方案
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.
这篇关于在JQuery中的Onclick函数不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
