一鍵單擊后如何禁用圖標單擊？

Question

單擊具有ID（ #prevleft和#nextright ）的圖標后，將調用ajax函數。 在ajax函數加載新表的過程中，我想disable icon click 。

HTML代碼：

hrHTML='<tr><th colspan="5"><i class="icon icon-chevron-left icon-2x lr" 
style="float:left;" title="Previous Five Weeks" 
id="prevleft"></i>' +"Weekly Utilization"+'<i class="icon icon-chevron-right 
icon-2x lr" style="float:right;" title="Next Five Weeks" id="nextright" 
></i></th>
</tr>';

表格行被動態附加，如上所示。 想要在單擊后禁用#prevleft和#nextright 。

以下行不起作用：

$（'＃prevleft'）。prop（“ disabled”，true）;

我是編碼的新手，因此感謝所有幫助。

Answer 1

您已將事件偵聽器附加到document尚不存在的一個或多個元素。 創建事件時，可以使用事件委托或jQuery()函數將事件附加到元素。

將html字符串傳遞給jQuery() ，使用.find()獲得"#prevleft" ， #nextright選擇器，使用.one()附加click事件，將jQuery()對象附加到document

$(elementWherehrHTMLIsAppended)
.append(
  $(hrHTML)
  .find("#prevleft, #nextright")
  .one("click", function() {
    $(this).prop("disabled", true)
  }).end()
);

Answer 2

只需檢查您使用的jquery版本，希望您使用的jquery 1.5或更低版本

對於jQuery 1.6+

使用可以使用.prop()函數：

$('#prevleft').prop("disabled", true);
$("#nextright").prop("disabled", true);

對於jQuery 1.5及更低版本

您需要使用.attr()並禁用圖標

$("#prevleft").attr('disabled','disabled');
$("#nextright").attr('disabled','disabled');

並重新啟用該圖標（完全刪除屬性）：

$("#nextright").removeAttr('disabled');
$("#prevleft").removeAttr('disabled');

假設您在圖標上具有事件處理程序，則在任何版本的jQuery中，您都可以使用以下屬性檢查您的圖標是否已啟用

if (this.disabled){
   // your logic here
}

Answer 3

單擊prevleft和prevright id圖標時，綁定簡單的click事件。

$("body").on("click","#prevleft ,#prevright",function(){
var _this = $(this);
 $(this).prop("disabled","true");
 // ajax call code right here 

  // on ajax success function right this line
    success: function(resp){
      _this.prop("disabled","false");
    }});

})

Answer 4

您可以將一個類添加到元素中，並在用戶單擊時檢查該類。

For example: 
$('#prevleft').click(function(){
    if($(this).hasClass('clicked')){
         // do nothing or return false
     }else{
          // ajax call 
          // on a successful call you can add the class using:
          $('#prevleft').addClass('clicked');
     }
});

讓我知道這是否是您要的。 這也使您能夠添加警報或在已單擊按鈕的情況下執行某些操作。 希望這對您有所幫助！

Answer 5

嘗試我的代碼，此事件僅在圖標未分類為“單擊”時才調用，在第一個調用中，我們將添加“ clicked”類以防止此事件從此時開始。

$('#prevleft:not(.clicked), #nextright:not(.clicked)').on('click', function(){
    $(this).addClass('clicked');
});

希望這可以幫到你！