这是我的一个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没有任何信息。怎么回事。
附上全部代码
html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>
亲 建议你这样试试哦
+关注
function myFunction() {
console.log("click me!");
});
现在基本没人用button了，想美观一点都是用如下的格式
<input type= 'button' value=' ' name= ' ' onclick= ' 'u>
你的empty有问题，虽然你给按钮加了index层级优先 但是很明显没哟起到作用 所以被覆盖了 你点击的时候根本就没有点击到按钮，下面是我把empty注释掉之后的代码，你想要怎么改看你自己，还有你这粘贴的代码实在是无语 结尾标签的左边括号都不见了。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
<script src="./jquery.min.js"></script>
</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 class="asu" 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>
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() == "购买") {
//调出购买的接口
}
console.log(1);
});
$("#asu").click(function (event) {
console.log(2);
});
// console.log($("#asu"));
// $(".asu").on("click",function() {
// console.log(2);
// })
</script>
</body>
</html>