Javascript 为什么jQuery重置方法不能正常工作？

我有一个使用jQuery在单击时加载的模式表单。表单中有一个重置按钮，其工作原理如下：

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

        return false;
    });

这个很好用。但是，我决定，我希望表单在单击链接时清除。我将代码复制到我的另一个单击函数，现在它不会重置表单：

$('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;
    });

我已经玩过订单显示窗体->清除它，清除窗体->显示它。但是出于某种原因，即使我看到它使用Firebug调用代码，它也没有清除表单。我可以在对话框中放入一些内容，关闭它，单击链接再次显示表单并查看旧数据

为什么它不能像我想的那样工作？这是相同的代码，不是吗

编辑：提供更多信息

我的对话框基于

css

，所以它实际上不是jQuery对话框。以下是相关内容：

#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;
}

以下是该页面的相关HTML

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

   </html:form>
</div>

编辑

---

我加入了一个模拟问题的例子。请注意，单击链接会显示

输入

，但不会将其清除。只有在输入可见后才会清除它。

我建议使用重置按钮进行此操作

<button type="reset">Reset</button>

这里有一个小问题：

我假设代码中的“…”是您忽略了加载代码对话框的地方。我认为发生的事情是你的清算代码在错误的时间运行。如果您正在使用jQueryUI模式，请利用其“打开”事件：

$('a.modal').click(function(){
  $('#yourmodal').dialog({
    open: function(event, ui) {
      $(this).find(':input', '#contactForm')
          .not(':submit, :reset, :hidden, :button')
          .val('')
          .removeAttr('checked')
          .removeAttr('selected');
    }
  });
  return false;
});

如果将对话框附加到不同的位置，代码可能会有点不同，但这是一般的想法

---

编辑-因此这里的技巧实际上不是“打开”事件，而是使用$.find（）方法。我可以告诉你，jQuery缓存DOM结构，当你调用一个对话框时，这些DOM元素会被复制、删除，并移动到DOM树的其他地方。由于jQuery的缓存中没有这些移动的DOM元素，因此必须使用一种方法强制在DOM中进行实时搜索（find（）就是这么做的）。

我解决了这个问题。现在回想起来似乎很傻。问题在于

.not（':hidden'）

。我认为

$(':input')
.not(':submit, :reset, :hidden, :button')

将不匹配设置为显示：无的

文本

输入，但显然匹配。在这里自己测试一下：，删除

：hidden

，它就会按预期工作

<div id="contact">
    <input type="text" value="Test" />
   Other text 
</div>

Onclick

 $(':input')
        .not(':submit, :reset, :button')
        .val('')
        .removeAttr('checked')
        .removeAttr('selected');
         //this DOES work

    $('div#contact').fadeIn();
    return false;

---

总之，脚本的问题在于，可以使用

：hidden

选择设置为

显示：无

的文本输入

你能展示一下HTML标记吗？一些好主意。我没有使用实际的jQuery

对话框

，但我喜欢使用

查找

函数。我将进一步调查，看看这是否能解决问题。我更新了我的问题以显示我的“对话”是如何工作的。谢谢你的帮助。原来我的问题是

：hidden

属性。看看我贴的答案。啊，是的，这总是最不明显的解决方案。很好地解决了这个问题！

#contact {
background-color:#fff;
display:none;
}

 $(':input')
        .not(':submit, :reset, :button')
        .val('')
        .removeAttr('checked')
        .removeAttr('selected');
         //this DOES work

    $('div#contact').fadeIn();
    return false;