jQuery binding ajaxStart and ajaxComplete to a form type?
<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>
