title: jQuery binding ajaxStart and ajaxComplete to a form type?
body: <p>my app has several jquery-ui-dialogs, all which do very different things. Here's the common template between them:</p>
  
  <pre><code>&lt;div class="dialog-content"&gt;    
  &lt;form accept-charset="UTF-8" action="/NOT-UNIQUE" class="NOT-UNIQUE" data-remote="true" id="NOT-UNIQUE" method="post"&gt;
      &lt;div class="ui-dialog-body"&gt;
   all the fields
      &lt;/div&gt;
      &lt;div class="ui-dialog-footer"&gt;
          &lt;input class="button" id="NOT-UNIQUE" name="commit" type="submit" value="NOT-UNIQUE"&gt;
          &lt;input type="button" class="button" name="cancel" value="Cancel"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I'd like to do is anytime a .dialog-content form is submitted, is disable the submit button so that users don't submit multiple times.</p>
  
  <p>So far I have: </p>
  
  <pre><code>$(".dialog-content").live("submit",function(){
  
      // Comment AJAX UI, spinner, disable - Needs to be inside the submit to work dynamically
      $("form", this).ajaxStart(function() {
          // Disable button
          $("input[type=submit]", this).attr("disabled", true);
      });
      $("form", this).ajaxComplete(function() {
          // Re-enable button
          $("input[type=submit]", this).removeAttr("disabled");
      });
  });
  </code></pre>
  
  <p>But that doesn't seem to work. The goal is to not have to write this for every dialog but once that works for all dialogs.</p>
  
  <p>Thoughts?</p>