title: JQuery AjaxStart For a Particular Element
body: <p>I have 2 elements on my page that use Ajax.  One is a simple checkbox (sets a default) and the other is a popup window triggered by a link.  The popup window has to load a bunch of elements so I have a 'loading...' overlay div that is triggered by ajaxStart() and hidden at ajaxStop().</p>
  
  <p>Everything works fine except that the ajaxStart() loading overlay is getting triggered for both the checkbox and the popup.  Its annoying for the checkbox because its a quick 'flash' of the div which I don't want.</p>
  
  <p>My Question:  How do I ONLY trigger the AjaxStart for a particular element on the page and not every Ajax-able element on the page?</p>
  
  <hr>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="checkbox" id="defaultproject"  /&gt;
  &lt;a class="openDialog" data-dialog-id="subscriberDialog" data-dialog-title="Project Subscriber" href="/Project/CreateSubscriber/1020" id="newsubscriber"&gt;Add Subscriber&lt;/a&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>    //POPUP 
      $(document).ready(function () {
      $(".openDialog").live("click", function (e) {
          e.preventDefault();
  
          $("&lt;div&gt;&lt;/div&gt;")
              .addClass("dialog")
              .attr("id", $(this).attr("data-dialog-id"))
              .appendTo("body")
              .dialog({
                  title: $(this).attr("data-dialog-title"),
                  close: function () { location.reload() },
                  modal: true,
                  draggable: false,
                  resizable: false,
                  width: 500
  
              })
              .load(this.href);
      });
  
      $(".close").live("click", function (e) {
          e.preventDefault();
          $(this).closest(".dialog").dialog("close");
      });  
  
  
      //CHECKBOX
      $("#defaultproject").change(function () 
      {
  
       var isitchecked = document.getElementById("defaultproject").checked
  
       $.ajax({
          url: '@Url.Action("SetDefaultProject")',
          data:  {"id": ProjectId, "isitchecked": isitchecked },
          type: 'POST',
          cache: 'false',
          success: function (response) {
              document.getElementById("defaultproject").disabled = "disabled";
          },
          error: function (xhr) {
              alert('There was an error.  Please try again');
              document.getElementById("defaultproject").checked = ""
          }
      });
  
     });
  
      //SHOW LOADING DIV
      //*** THIS IS WHERE I'M HAVING PROBLEMS
  
      $('.openDialog').ajaxStart(function () {
          $('#loadingdiv').show();
      }).ajaxStop(function () {
          $('#loadingdiv').hide();
      });
  </code></pre>