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()常に、あなたは複数のハンドラにそれらを分離することができます。

すると、そのうちの一つは、（jQueryの.one()を使用すると、あなたのためにそれをカバーします）その最初の使用後に取り外すことができ、まだ使用中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()がされています.unbind('click')によっても削除されているため、2回目のクリックで呼び出す機能は要素に残っていません。

Answer 2

ハンドラのバインドを解除すると、以降のクリックでボタンが正常に機能し、ナビゲーションが開始されます。 event.preventDefault()が実際に動作することを

$(".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>

注：だから、より良い本当にdisabledプロパティを設定します。リンクはまだクリック可能だったので、問題が発生したのは2回目のクリックだけでしたが、関数はそのリンクから切り離されていたので、2回目のクリックを制御できませんでした。