这是我的一个html的按钮button，它的id叫asu，发现这个按钮无论如何都点不动，点击事件无效，不能在控制台打出相应信息。这是怎么回事。我这里有两个button，还有一个id叫c2的button是正常的。一个按钮正常，一个按钮点不动，这是怎么回事。
这是asu的HTML代码
<div id="ad">
<div id="ac">
<div id="aa">
<img th:src="${det.icon}" id="icons">
</div>
<div id="ab">
<nobr class="span6" th:text="${det.company}"></nobr></br>
<nobr class="span7" th:text="'作品 '+${num}"></nobr>
</div>
<button type="button" id="asu">+关注</button>
</div>
</div>
这是asu的CSS代码
#asu{
border-radius: 5px;
width: 64px;
float: right;
margin-right: 8px;
margin-top:5%;
height:32px;
font-size: 14px;
background: orange;
}
这是asu的JS代码
$("#asu").click(function (event){
console.log("click me!");
});
不知道出了什么问题，这个按钮就是点不动，console没有任何信息。怎么回事。
附上全部代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#message{
margin-top: 32px;
text-align: center;
}
#picture{
margin-top: 15px;
position: relative;
left:6%;
text-align: center;
width: 92%;
}
.span1{
font-size: 17px;
font-family: 微软雅黑;
font-weight: bold;
color: white;
}
.span2{
color: black;
font-size: 9px;
background-color: yellow;
margin-left: 4px;
padding: 4px;
margin-top: 4px;
}
.span3{
color: black;
font-size: 9px;
background-color: yellow;
padding: 4px;
margin-top: 4px;
margin-left: 4px;
}
.span4{
color:yellow;
background-color: gray;
font-size: 9px;
padding: 4px;
margin-top: 4px;
margin-left: 4px;
}
.span5{
color:yellow;
background-color: gray;
font-size: 9px;
padding: 4px;
margin-top: 4px;
margin-left: 4px;
}
#co{
margin-top: 24px;
}
#content{
margin-top: 16px;
font-size: 13px;
color: white;
}
.span6{
font-size: 10px;
color: white;
}
.span7{
font-size: 10px;
color: white;
}
#aa{
float:left;
position: relative;
left:-3%;
}
#ab{
float:left;
margin-left: 2px;
margin-top: 3%;
}
#ac{
margin-top: 12px;
background-color: gray;
width: 90%;
position: relative;
left: 6%;
border-radius: 8px;
}
#bb{
margin-top: 12px;
background-color: gray;
width: 100%;
position: relative;
left:4%;
top:5%;
border-radius: 8px;
margin-left: auto;
}
#be{
position: relative;
top:20px;
left:4%;
width: 92%;
}
#da{
position: relative;
top:20px;
left:-1.1%;
width: 92%;
}
#ad{
position: relative;
margin-top: 42px;
}
#asu{
border-radius: 5px;
width: 64px;
float: right;
margin-right: 8px;
margin-top:5%;
height:32px;
font-size: 14px;
background: orange;
z-index: 9999;
}
#bc{
margin-left: 4%;
margin-top: 4%;
font-size: 16px;
color: white;
float:left;
font-weight: bold;
}
#ba{
position: relative;
left: 3%;
width: 88%;
}
#icons{
position: relative;
left:12%;
}
#bf{
position:relative;
top:-150px;
left:0px;
}
.bg{
position: relative;
top:24px;
margin-top: 12px;
left:4%;
width:100%;
}
.bh{
text-align: left;
float: left;
font-size: 10px;
color:red;
font-weight: bolder;
background-color: transparent;
margin-left: 2px;
}
.bi{
float:right;
text-align: right;
font-size: 10px;
margin-right: 20px;
color:white;
background-color: transparent;
font-weight: bolder;
}
.menu {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 10%;
color: #000000;
padding-top: 5px;
border-top: 1px solid #000000;
background-color: #333333;
}
#c1{
float:left;
margin-left: 25px;
font-size: 12px;
margin-top: 10px;
color: white;
font-weight: bold;
font-family: 微软雅黑;
}
#c2{
float:right;
margin-right: 25px;
font-size: 8px;
margin-top: 3px;
color: white;
background-color: cyan;
font-weight: bold;
font-family: 微软雅黑;
height:48px;
width:120px;
}
#empty{
background-color: black;
height: 252px;
width: 100%;
}
#f1{
background-color: gray;
width: 90%;
height:20px;
position: relative;
left:5%;
top:-90px;
border-radius: 8px;
}
</style>
</head>
<body style="background-color: black">
<div id="picture">
<image th:src="${det.path2}" id="da" height="100%" width="100%"></image>
</div>
<div id="message" width="92%">
<nobr class="span1" th:text="${det.cangpinname}"></nobr>
<div id="co">
<nobr class="span2" th:text="${det.type2}"></nobr>
<nobr class="span3">限量</nobr>
<nobr class="span4" th:text="${det.totalnum}"></nobr>
<nobr class="span5" th:text="' '+${det.sys}"></nobr><br>
</div>
<div id="content">
--------购买即可体验内容--------
</div>
</div>
<div id="ad">
<div id="ac">
<div id="aa">
<img th:src="${det.icon}" id="icons">
</div>
<div id="ab">
<nobr class="span6" th:text="${det.company}"></nobr></br>
<nobr class="span7" th:text="'作品 '+${num}"></nobr>
</div>
<button type="button" id="asu">+关注</button>
</div>
</div>
<div id="bf">
<div id="ba">
<div id="bb">
<div id="bc">作品故事</div>
<div id="bd">
<img th:src="${det.detail}" id="be" height="100%" width="100%">
</div>
<div class="bg">
<nobr class="bh">创作者</nobr>
<nobr class="bi" th:text="${det.creator}"></nobr>
</div>
<br>
<div class="bg">
<nobr class="bh">发行方</nobr>
<nobr class="bi" th:text="${det.faxing}"></nobr>
</div>
</div>
</div>
</div>
<div id="f1">
<div style="font-size: 15px;color: white;margin-bottom: 3px;font-family: 微软雅黑;padding-left: 8px;
font-weight: bold;padding-right: 8px;margin-top: 5px" id="g1"></div>
<div style="font-size: 9px;color: #aaaaaa;padding-left: 8px;padding-right: 8px" id="g2">
</div>
</div>
<div id="empty"></div>
<div id="began" th:text="${det.began}" hidden="hidden"></div>
<div id="num" th:text="${det.num}" hidden="hidden"></div>
<div id="menu" class="menu">
<span th:text="'￥'+${det.xianjia}" id="c1"> </span>
<button id="c2">已售罄</button>
</div>
<script type="text/javascript">
var num=0;
var num1=0;
var numlk1=$("#num").text();
var aa=$("#g1").height();
var ba=$("#g2").height();
var ba2=aa+ba+5;
window.onload=function () {
var myheight=$("#icons").height();
var picheight=$("#be").height();
var divheight=picheight*1.05;
$("#ac").height(myheight);
$("#bb").height(divheight);
var c=$("#bb").height();
var d=c+120;
$("#ba").height(d);
$("#f1").height(ba2);
}
setInterval(function () {
var time=new Date();
var year=time.getFullYear();
var month=time.getMonth()+1;
var day=time.getDate();
var hour=time.getHours();
var minute=time.getMinutes();
var second=time.getSeconds();
if(month<10) month="0"+month;
if(day<10) day="0"+day;
if(hour<10) hour="0"+hour;
if(minute<10) minute="0"+minute;
if(second<10) second="0"+second;
var ef=year+"/"+month+"/"+day+" "+hour+":"+minute+":"+second;
var eh=new Date($("#began").text());
var eg=new Date(ef);
var ei=eh.getTime()-eg.getTime();
var days=Math.floor(ei/(24*3600*1000));
var leave1=ei%(24*3600*1000) //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000))
//计算相差分钟数
var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000))
//计算相差秒数
var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000)
if(hours<10){
hours="0"+hours;
}
if(minutes<10){
minutes="0"+minutes;
}
if(seconds<10){
seconds="0"+seconds;
}
if(days==0){
}
if(days>=0){
$("#c2").text("开售时间"+"\n"+"eg");
$("#c2").css("background","orange");
}
if(days<0){
if(numlk1>0){
$("#c2").text("购买");
$("#c2").css("background","orange");
}
if(numlk1==0){
$("#c2").text("已售罄");
$("#c2").css("background","cyan");
}
}
},1000)
$("#c2").click(function (event) {
num1++;
if(numlk1>0&&$("#c2").text()=="购买"){
//调出购买的接口
}
});
$("#asu").click(function (event){
console.log("click me!");
});
</script>
</body>
</html>
