title: jQuery ajaxStart and ajaxStop failing to rebind
body: <p>I am binding different loading messages for two different events.</p>
  
  <p>Here are the functions that I'm using to bind the behaviour before AJAX calls.  I am calling each function before each matching Ajax submission so that it will show the correct loading messages for each one:</p>
  
  <pre><code>function BindPersonalityLoader()
  {
  
      // Bind the loader to personality
      $('document').bind("ajaxStart", function() {
          // Show the loader
          $('img#personality_loader').show();
      });
  
      // Bind the loader to personality
      $('document').bind("ajaxStop", function() {
          // Show the loader
          $('img#personality_loader').hide();
      });
  }
  
  function BindLoadEditPersonalityLoader()
  {
  
      // Bind the loader for editing a personality
      $('document').bind("ajaxStart", function() {
  
          // Hide the edit form
          $('div#quiz_maker_add_personality_wrapper').hide();
  
          // Show the loader
          $('div#quiz_maker_edit_personality_loader').show();
      });
  
      // Bind the loader for editing a personality
      $('document').bind("ajaxStop", function() {
  
          // Hide the loader
          $('div#quiz_maker_edit_personality_loader').hide();
      });
  }
  </code></pre>
  
  <p>As soon as I have called <code>BindLoadEditPersonalityLoader()</code>, this becomes permanent for some reason, even if I then call <code>BindPersonalityLoader()</code> within my code, I expect the other behaviour.</p>
  
  <p>For some reason why I call the code, it is not overriding the "bind".</p>
  
  <p>For example if I run the following code, the behaviour of <code>BindLoadEditPersonalityLoader()</code> remains throughout, because it was called first:</p>
  
  <pre><code>// Bind the loaders once
  BindLoadEditPersonalityLoader();
  
  // Bind the loaders to different behaviour
  BindPersonalityLoader();
  </code></pre>
  
  <p>I have included the two <code>alert()</code> messages so that I can see when they have been called.</p>
  
  <p>I have tried calling <code>unbind("ajaxStart ajaxStop");</code> but this didn't work either.</p>
  
  <p>This is how I am calling the binds within my two different events:</p>
  
  <pre><code>    // Add a new personality to the quiz
  $('form#personality_editor').submit(function(e) {
  
      e.preventDefault();
  
      // Bind the loader to personality loader
      BindPersonalityLoader();
  
              // AJAX Call here
  
      });
  
      // Edit a personality already existing within the quiz
  $('a.personality_edit').live('click', function(e) {
  
      e.preventDefault();
  
      // Bind loader for editing personality
      BindLoadEditPersonalityLoader();
  
              // Ajax call here
      });
  </code></pre>