在项目中,咱们可能会碰到一些禁用某些标签的事,好比说禁用button按钮的点击事件。对于button按钮,只须要让它的disabled属性等于diabled或true,那这个按钮就不会再触发点击事件了。可是,若是这个按钮是一个a标签,那disabled属性再也不对a标签起做用,由于a标签中没有这个属性。html
我当时在项目中碰到这个问题时,着时纠结了半天。后来想到,既然要让这个a标签作成的按钮不能点击,那我先把它的click事件给解绑了,而后在须要的时候从新绑定不就能够了吗?想到就作,果真成功了。ajax
如下是代码,需求是成功发送短信验证码后,60秒后才可再次点击从新发送。post
$(function(){ var phoneBox = $('#phone');//手机号码输入框 var phoneTipBox = $('#phone_tip');//手机号码提示 var getCodeBtn = $('#get_code');//获取验证码按钮 var phoneCodeBox = $('#phone_code');//手机验证码输入框 //获取短信验证码的方法 var sendPhoneCode = function(){ if (isPhoneCorrect){ //isPhoneCorrect表示输入的手机号码格式是否正确 var phone = phoneBox.val(); $.ajax({ url : "/user/passport/register_send_code", type : "post", data : { phoneNo : phone}, success : function(rdata){ if (rdata.errCode == 0){ phoneTipBox.removeClass().addClass("onCorrect").html(rdata.errDesc); //获取验证码成功后开始进行禁用倒计时 reSendCountdown(); }else if (rdata.errCode == -1){ phoneTipBox.removeClass().addClass("onError").html(rdata.errDesc); }else { alert(rdata.errDesc); } } }); }else { phoneTipBox.removeClass().addClass("onError").html("手机号码输入错误!"); isPhoneCorrect = false; } } //60s后从新发送手机验证码 var reSendCountdown = function(){ var count = 60;//禁用时间为60秒 //解绑按钮的点击事件(该按钮是一个a标签) getCodeBtn.html(count+"秒后点击从新发送").addClass("resend").unbind("click"); var resend = setInterval(function(){ count--; if (count > 0){ getCodeBtn.html(count+"秒后点击从新发送"); }else { clearInterval(resend);//清除计时 //从新绑定按钮的click事件 getCodeBtn.bind("click", sendPhoneCode).removeClass("resend").html("从新获取验证码"); phoneTipBox.removeClass().addClass("tishi").html("若是没有收到短信,请点击从新发送!"); } }, 1000); } //点击按钮触发获取短信验证码事件 getCodeBtn.click(sendPhoneCode); });