显示正在加载窗口的jQuery

Am trying to display a loading div when an ajax post request send. Tried with these code its not working. Please help me to solve this issue.

$(document).ready(function() {
    $('a.pagerlink').click(function(event){
        var id = $(this).attr('id');

        beforeSend: function() {
            $('#load').show();
        },
        complete: function() {
            $('#load').hide();
        },
        $.post(
                "invited-friends",
                { gameid: id },
         function(data) {
               $('#middlefriends').html(data);
          }

        );
    });
});

My html code

     <a id="1" class="pagerlink" >hi</a>

Am expecting to display load div when an ajax post occurs. And hide load div after request complete.

You can instead use the .ajaxStart and .ajaxStop methods:

var loading = $("#load");
$(document).on({
    ajaxStart: function () { loading.show(); },
    ajaxStop : function () { loading.hide(); }
});

Here's modified code :-

$(document).ready(function() {
    $('a.pagerlink').click(function(event){
        var id = $(this).attr('id');
        $('#load').show();
        $.post("invited-friends", { gameid: id }, function(data) {
            $('#load').hide();
            $('#middlefriends').html(data);
        });
    });
});