title: Targeting specific ajax calls which incorporate AjaxStart/Stop
body: <p>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. </p>
  
  <p>This works...it adds the class "loading" to a hidden div containing the spinner and displays it.</p>
  
  <pre><code>$(document).bind("ajaxStart", function () {
      $body.addClass("loading");
  });
  
  $(document).bind("ajaxStop", function () {
      $body.removeClass("loading");
  });
  </code></pre>
  
  <p>Now from other stack answers I have seen that you can add namespaces to ajaxstart/stop
  (<a href="https://stackoverflow.com/questions/1061922/jquery-should-i-use-multiple-ajaxstart-ajaxstop-handling">jQuery should I use multiple ajaxStart/ajaxStop handling</a>)</p>
  
  <p>......along the lines of</p>
  
  <pre><code>$(document).bind("ajaxStart.secondCall", function () {
      $body.addClass("loading2");
  });
  
  $(document).bind("ajaxStop.secondCall", function () {
      $body.removeClass("loading2");
  });
  </code></pre>
  
  <p>But this doesn't work in its current form. Any guidance would be appreciated...</p>
  
  <p>UPDATE:</p>
  
  <p>AS AN ADDITION TO ILYAS SOLUTION AND BASED ON HIS GUIDANCE I IMPLEMENTED THE AJAX START FUNCITONALITY IN MY AJAX CALL ....</p>
  
  <pre><code>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;
  }
  </code></pre>