How to disable anchor tag onclick events inside div element?

Question

I have html content as given below.

<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>

Problem:

When I click on any link, in the onClick function I will make one ajax call.

I just want to disable all the onClick events of a tag(or disable the entire div and all of its child elements) till I get the ajax response after getting the response I need to re-enable all the a tag onclick events.

Is there any way achieve the same?

Answer 1

You can use beforeSend callback of jqXHR where you can disable all anchor tag and jqXHR.always() callback where you will enable all anchor tag .

go through Jquery Ajax Documentation

Answer 2

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

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

Check This DEMO

Answer 3

You can use .ajaxStart() & .ajaxStop() JQUERY events to do this. You can create a different css to disable the anchor tag as below :

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

and while enabling it back

$('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');
                }
            });

This will remove your href and create a custom attribute. So your click event will not work on anchor tag.

Answer 4

You can try this:

1) Add class to 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) Hide div when ajax starts and show div in success of ajax:

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

set a flag for active status

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>

Note: This is an alternate solution. IMHO kedar kamthe's solution is the best way to solve this problem

Answer 6

Thanks for so many solutions.

I have found a very simple solution.

Solution:

You can use the CSS property pointer-events to disable the click event on any element:

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

Thanks,

Dixit

Answer 7

you can use beforeSend to set a callback function to disable all elements. and enable them in success. You can add a function to disable/enable those element. add an id to the div.

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