2016-11-12 52 views
0

最初のクリックでは、ボタンのクリック機能は機能しますが、もう一度クリックすると、ページが更新され、アンバインドが認識されません。私はデフォルトのクリックイベントを防止するだけでなく、クリック後にボタンを無効にする必要があります。hrefを無効にする方法と無効にする

<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"); 
}); 
+0

あなたはクリックイベントのバインドを解除します....もちろん、それには何も付いていないので、リンクになります... – epascarello

答えて

2

あなたは一度だけ実行するハンドラの残りの部分が必要な場合は、しかし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回目のクリックで呼び出す機能は要素に残っていません。

+0

私は今あなたに感謝します。最初は.unbindを正常に使用してから、preventDefaultを追加する必要があることを認識し、矛盾を起こしました。このソリューションは、必要に応じて正確に動作します。 – Andrew

1

ハンドラのバインドを解除すると、以降のクリックでボタンが正常に機能し、ナビゲーションが開始されます。 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回目のクリックを制御できませんでした。

+0

その後、いくつかのdivテキストを更新するための行を追加しました:$( '#growl')。append( 'Success');これは、最初のクリック後に毎回繰り返されるので、何らかの理由で.prop( 'disabled'、true)が動作しないようです。 http://codepen.io/torch/pen/vyGJNb – Andrew

+1

確かに。今すぐ修正しました。無効なプロパティをテストする 'if'を追加し、それが真であるときに終了しますが、デフォルトの動作を妨げた後でなければ終了します。 – trincot

+0

優れています。今夜はたくさんのことを学んでいますが、これは間違いなく役立ちました。 – Andrew

関連する問題