Why does this jQuery reset method not work correctly?
<p>I have a modal form that is loaded on click using jQuery. There is a reset button in the form that works like this:</p>

<pre><code>$('input#reset').click(function() {
        $(':input', '#contactForm')
            .not(':submit, :reset, :hidden, :button')
            .val('')
            .removeAttr('checked')
            .removeAttr('selected');

        return false;
    });
</code></pre>

<p>This works fine. However I decided that I wanted the form to clear whenever the link is clicked. I copied the code over to my other click function and now it doesn't reset the form:</p>

<pre><code>$('a.modal').click(function(){  
                    ...
        //show the contact form
        $('.success, .error, .success_header, .error_header').hide();
        $('form#contactForm,#contact_subhead').show();

        // Reset all the default values in the form fields

        $(':input', '#contactForm')
            .not(':submit, :reset, :hidden, :button')
            .val('')
            .removeAttr('checked')
            .removeAttr('selected');
             //this doesn't work

        //show the mask and contact divs
        $('#mask').show().fadeTo('', 0.7);
        $('div#contact').fadeIn();

    // stop the modal link from doing its default action
        return false;
    });
</code></pre>

<p>I've played around with the order show form->clear it, clear form->show it. But for some reason, even though I see it call the code using Firebug, it doesn't clear the form. I can put some stuff in the dialog, close it, click on the link to display the form again and see the old data. </p>

<p>Why isn't this working like I think it should? It is the same code isn't it?</p>

<p><strong>EDIT: Providing more information</strong></p>

<p>My dialog is <code>css</code> based so it isn't actually a jQuery dialog. Here is the relevant piece: </p>

<pre><code>#contact {
background-color:#fff;
display:none;
left:50%;
margin-left:-300px;
position:absolute;
top:20px;
width:643px;
z-index:9999;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
padding:3px;
}


#contactForm {
width: 350px;
margin-left: 20px;
position: relative;
top: -50px; 
float: left;
}
</code></pre>

<p>Here is the relevant HTML of the page. </p>

<pre><code>&lt;div id="contact"&gt;
&lt;html:form action="/contactUs" styleId="contactForm"&gt;   
    &lt;br /&gt;&lt;html:text property="emailAddress" maxlength="30" style="width=30"/&gt;
    &lt;br /&gt;&lt;html:errors property="emailAddress"/&gt;&lt;/p&gt;        
    &lt;div class="button_container"&gt;
        &lt;p&gt;&lt;input type="image" src="images/reset_btn.png" id="reset" name="reset" alt="Reset" onclick="ntptEventTag('ev=link&amp;linkname=' + escape('contact form: Reset'));" /&gt;
        &lt;html:image src="images/submit_btn.png" styleId="submit" onclick="ntptEventTag('ev=link&amp;linkname=' + escape('contact form: Submit'));"&gt;&lt;/html:image&gt;&lt;/p&gt;
    &lt;/div&gt;

   &lt;/html:form&gt;
&lt;/div&gt;
</code></pre>

<p><strong>EDIT</strong></p>

<p>I included a <a href="http://jsfiddle.net/rawsmell/pDe43/2/" rel="nofollow">jsfiddle</a> to simulate the problem. See that clicking the link shows the <code>input</code> but doesn't clear it. It only clears it after the input is visible.</p>
