Targeting specific ajax calls which incorporate AjaxStart/Stop

Question

I am trying to display a loading spinner for during ajax calls on my page. I want to target different ajax calls and display different spinners. As things stands, as ajaxStart is a global event, an all ajax calls end up displaying all spinners at the same time.

This works...it adds the class "loading" to a hidden div containing the spinner and displays it.

$(document).bind("ajaxStart", function () {
    $body.addClass("loading");
});

$(document).bind("ajaxStop", function () {
    $body.removeClass("loading");
});

Now from other stack answers I have seen that you can add namespaces to ajaxstart/stop (jQuery should I use multiple ajaxStart/ajaxStop handling)

......along the lines of

$(document).bind("ajaxStart.secondCall", function () {
    $body.addClass("loading2");
});

$(document).bind("ajaxStop.secondCall", function () {
    $body.removeClass("loading2");
});

But this doesn't work in its current form. Any guidance would be appreciated...

UPDATE:

AS AN ADDITION TO ILYAS SOLUTION AND BASED ON HIS GUIDANCE I IMPLEMENTED THE AJAX START FUNCITONALITY IN MY AJAX CALL ....

function sendResponse(thread_id){
        $(document).off(".reference_call");
         $(document).on("ajaxStart.secondCall", function () {
         $('.spinner').show();
      });
 $.ajax({
    url: 'someURL.php',
    type: 'post',
    data: {
              //data
         },
            success: function(data) {
            $(document).on("ajaxStop.secondCall", function () {
               $('.spinner').hide();
            });
                    //do stuff....

                    } else {

                     //do stuff....
                    }
              }
        });
  return false;
}

Answer 1

So, as it was mentioned in the discussion linked to the question, you can bind to and unbind from ajax events using your custom namespaces. Here is simple example demonstrating this approach. In the first part of your code you bind to ajax events with .firstCall namespace, like this:

$(document).on("ajaxStart.firstCall", function () {
    $('.spinner1').show();
});
$(document).on("ajaxStop.firstCall", function () {
    $('.spinner1').hide();
});
// then goes your ajax call

Later in code, when you need to send second ajax with different spinner, you must unbind from .firstCall namespace and bind to .secondCall like this:

$(document).off(".firstCall");
$(document).on("ajaxStart.secondCall", function () {
    $('.spinner2').show();
});
$(document).on("ajaxStop.secondCall", function () {
    $('.spinner2').hide();
});
// then goes your second ajax call

As an alternative you might consider using one set of global ajax events handlers, and move your logic on what spinner to show/hide inside those callbacks, but this really depends on what logic that is.