div要素内のアンカータグのonclickイベントを無効にするにはどうすればよいですか？

Question

私は以下のようなhtmlコンテンツを持っています。

<div> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
</div> 

問題：私は任意のリンクをクリックすると

、onClickの機能で、私は1つのAJAX呼び出しを行います。

私は、応答を受け取った後にajax応答を得るまで、タグのすべてのonClickイベントを無効にする（またはdivとそのすべての子要素を無効にする）だけです。すべてのタグonclickを再度有効にする必要がありますイベント。

同じことを達成する方法はありますか？

Answer 1

ありがとうございます。

私は非常に簡単な解決策を見つけました。

ソリューション：

あなたが任意の要素にクリックイベントを無効にするには、CSSプロパティのポインタ・イベントを使用することができます。

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

// To disable:  
document.getElementById('id').style.pointerEvents = 'none'; 
// To re-enable: 
document.getElementById('id').style.pointerEvents = 'auto'; 
// Use '' if you want to allow CSS rules to set the value 

おかげで、

ディキシット

Answer 2

<a href="#" onclick="someFunction();">Link 1</a> 

someFunction(){ 
    //some code here 
    $.get('test.aspx', function(data){ 
    //do something here 
    }) 
return false; 
} 

チェックこのDEMO

Answer 3

あなたはこれを行うには.ajaxStart() & .ajaxStop()jQueryのイベントを使用することができます。

$('a[href]').each(function() { 
         var $this = $(this); 
         if ($this.attr('href') && $this.attr('href') != '') { 
          $(this).attr('data-href', $(this).attr('href')); 
          $(this).removeAttr('href'); 
         } 
        }); 

をバック

$('a[data-href]').each(function() { 
       var $this = $(this); 
       if ($this.attr('data-href') && $this.attr('data-href') != '') { 
        $(this).attr('href', $(this).attr('data-href')); 
        $(this).removeAttr('data-href'); 
       } 
      }); 

それを有効にする。これは、あなたのHREFを削除し、カスタム属性を作成する一方：あなたは、以下のようにアンカータグを無効にするには、別のCSSを作成することができます。したがって、クリックイベントはアンカータグでは機能しません。

Answer 4

あなたがこの試すことができます：div要素にクラスを追加します）

1：

<div class="myDiv"> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
</div> 

2）AJAXを開始し、ショーのdiv AJAXの成功にdiv要素を非表示にする：

$(".myDiv").css('opacity','0.25');// blur div when ajax starts 
    $.ajax("test.php", { 
      success: function(data) { 
      $(".myDiv").css('opacity','1');// display div as ajax complete 
      }, 
      error: function() { 
      alert('An error occurred'); 
      } 
     }); 
    }); 

Answer 5

あなたはすべてのアンカータグを無効にすることができるjqXHRのbeforeSendコールバックと、すべてのアンカータグを有効にする jqXHR.always（）コールバックを使用できます。

Jquery Ajax Documentation

Answer 6

通過が

function someFunction(){ 
    var status = $('#parentDiv').attr('data-active'); 
    if(!status){ 
     $("#parentDiv").attr('data-active',true); 
     //make ajax call 
     $.ajax("url", { 
      success: function(data) { 
       $("#parentDiv").attr('data-active',false);//make false when done 
      } 
     }); 
    } 
    } 

<div id="parentDiv" data-active="false"> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
    <a href="#" onclick="someFunction();">Link 1</a> 
</div> 

アクティブ状態のための注フラグを設定：これは、代替ソリューションです。 IMHO kedar kamtheのsolutionは、この問題を解決する最善の方法です。

Answer 7

beforeSendを使用して、すべての要素を無効にするコールバック関数を設定することができます。それらを成功に導く。これらの要素を無効/有効にする関数を追加することができます。 divにidを追加します。あなたは、JSファイル内のイベントをバインドする場合

$.ajax( 
    url: "your url", 
    beforeSend: function(xhr) { 
    disabledFields(true); 
    }, 
    success: function(){ 
    disabledFields(false); 
    }, 
    error: function(){ 
    disabledFields(false); 
    }); 

// 
function disabledField(isDisabled) 
{ 
    $("#myDiv").find("a").each(function(){ 
     if (isDisabled) 
     { 
      $(this).attr("disabled", "disabled"); 
     } 
     else 
     { 
      $(this).removeAttr("disabled"); 
     } 
    }); 
}