title: Bootstrap button loading + Ajax
body: <p>I'm using Twitter Bootstrap's button loading state (<a href="http://twitter.github.com/bootstrap/javascript.html#buttons">http://twitter.github.com/bootstrap/javascript.html#buttons</a>).</p>
  
  <pre><code>HTML:
  
  &lt;input type="submit" class="btn" value="Register" id="accountRegister" data-loading-text="Loading..."/&gt;
  
  JS:
  
  (function ($, undefined) {
      $("#accountRegister").click(function () {
          $(this).button('loading');
          $.ajax({
              type:"POST",
              url:"/?/register/",
              data:$("#loginForm").serialize(),
              error:function (xhr, ajaxOptions, thrownError) {
                  $("#accountRegister").button('reset');
              },
              success:function (data) {
                  $("#accountRegister").button('reset');
              }
          });
          return false;
      })
  })(jQuery);
  </code></pre>
  
  <p>But if I have many buttons I need to write many functions (?).
  Of course I can make something like this:</p>
  
  <pre><code>$(".ajax-button").bind("click", function() { 
       $(this).button("loading");})
  </code></pre>
  
  <p>And I can use jQuery Ajax event <code>ajaxComplete</code></p>
  
  <pre><code>$(".ajax-button").bind("ajaxComplete", function() { 
       $(this).button("reset");})
  </code></pre>
  
  <p>But this way <strong>ALL</strong> buttons will be set to normal state when <strong>any</strong> Ajax request completed.</p>
  
  <p>If user will click on <em>button1</em> and then click on <em>button2</em> (both buttons are sending Ajax request), they will be set to normal state when first Ajax request is completed. How to determine which button I need to set to a normal state?</p>
  
  <p>Thank you in advance.</p>
  
  <h2>UPDATE</h2>
  
  <p>All I need is determine which button triggered some action (Ajax request), set it state to <em>loading</em> and when Ajax request will be completed set it state to normal.</p>