JQueryのクリックイベントの無効化

Question

JQueryのクリックイベントでAPIを呼び出し、DBに登録するシステムを作ってます。
普通にクリックすれば問題なくDBに登録されるのですが、
確認メッセージの「はい」を素早くクリックすると２回APIが呼び出されてるっぽくてDBに同じデータを２回登録しようとして
エラーメッセージが表示されます。
（「既に登録されています」が表示されます。）

<a chref="javascript:void(0);" id="btn-yes"><i></i>はい</a>

			$html.find('#btn-yes').on('click', function(){
				// マージ
				$.ajax({
					type: 'POST',
					url: url,
					data: send_data,
					dataType: 'json',
					cache: false,
					async: true,
					timeout: 10000
				});
				d.done(function(res){
                                   //登録成功
				});
				d.fail(function(res){
                                   //登録失敗
				});
			});

通信が終わるまでイベントを受け付けないようにする方法はないでしょうか？

Comments

[FKM]

#btn_yesは2箇所入ってないですよね？

Answer 1

たとえばクリックしたあとに一旦クラスを付加するとか

$(function(){
  $('a').on('click',function(e){
    var a=$(this);
    if($(this).is(':not(.disabled)')){
      $(this).addClass('disabled');
      $.ajax({
      type: 'POST',
      url: url,
      timeout: 10000
      }).done(function(res){
        console.log(res);
        a.removeClass('disabled');
      });
    }
  });
});

Comments

[limitman80]

これでいけました。
ありがとうございます。