在項目中,咱們可能會碰到一些禁用某些標籤的事,好比說禁用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); });