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> 

문제 : 어떤 링크를 클릭하면

의 온 클릭 기능에 나는 하나 개 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

이 작업을 시도 할 수 있습니다 :

1) DIV에 클래스를 추가

<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) 숨기기 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() 콜백을 사용할 수 있습니다.

이

Answer 6

Jquery Ajax Documentation이 활성 상태

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