如何防止默認並禁用href

Question

首先點擊我的按鈕點擊功能的作品，但一旦再次點擊刷新頁面點擊解除綁定不被識別。我需要防止任何默認的點擊事件以及點擊後禁用按鈕。

<a href="" class="red-btn2">Save this Property</a> 

$(".red-btn2").click(function(event){ 
    event.preventDefault(); 
    $(this).unbind('click'); 
    $(this).css({ 
    'background-color':'#666666', 
    'text-align':'center' 
    }); 
    $(this).text("Added to Favorites"); 
}); 

Answer 1

如果你需要處理的其餘部分只運行一次，但總是preventDefault()，你可以把它們分成多個處理程序。

$('.red-btn2') 
    .click(function (event) { 
     event.preventDefault(); 
    }) 
    .one('click', function() { 
     $(this).css({ 
     'background-color':'#666666', 
     'text-align':'center' 
     }); 
     $(this).text("Added to Favorites"); 
    }); 

當你擁有了它，在event.preventDefault()是是：

然後，他們可以在第一次使用（使用jQuery的.one()將涵蓋你），還是留在使用preventDefault()之後被去除.unbind('click')也被刪除，所以元素上沒有剩下任何功能來調用它來進行第二次點擊。

Answer 2

當您解除綁定處理程序時，該按鈕將在任何後續點擊上按正常方式運行，並啓動導航。所以你最好真正建立殘疾人財產：

$(".red-btn2").click(function(event){ 
 
    event.preventDefault(); 
 
    if ($(this).prop('disabled')) return; // <--- 
 
    $(this).prop('disabled', true); // <---- 
 
    $(this).css({ 
 
    'background-color':'#666666', 
 
    'text-align':'center' 
 
    }); 
 
    $(this).text("Added to Favorites"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" class="red-btn2">Save this Property</a>

注意event.preventDefault()實際工作。只有在第二次點擊時，您纔有問題，因爲鏈接仍然是可點擊的，但是您的功能已與其分離，因此您無法控制第二次點擊。