为什么这个jQuery重置方法不能正常工作

Why does this jQuery reset method not work correctly?

本文关键字：常工作 工作 不能 方法 jQuery 为什么      更新时间：2023-09-26

我有一个模态表单，它是使用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>

编辑

我加入了一个jsfiddle来模拟这个问题。请注意，单击链接会显示input，但不会清除它。只有在输入可见后才会清除它。

我假设代码中的"…"是您省略对话框加载代码的地方。我认为发生的事情是你的清算代码在错误的时间运行。如果您正在使用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;
});

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

EDIT-所以这里的技巧实际上不是"open"事件，而是使用$.find（）方法。据我所知，jQuery缓存DOM结构，当您调用对话框时，这些DOM元素会被复制、删除并移动到DOM树中的其他位置。由于jQuery的缓存中没有移动的DOM元素，因此必须使用一种方法来强制对DOM进行实时搜索（find（）就是这样做的）。

我解决了这个问题。现在回想起来似乎很傻。.not(':hidden')就是问题所在。我认为

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

将不匹配被设置为CCD_ 5的CCD_。在这里为自己测试：http://jsfiddle.net/rawsmell/pDe43/2/，删除:hidden，它将按预期工作。

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

CSS

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

点击

 $(':input')
        .not(':submit, :reset, :button')
        .val('')
        .removeAttr('checked')
        .removeAttr('selected');
         //this DOES work
    $('div#contact').fadeIn();
    return false;

总之，脚本的问题在于，可以使用:hidden来选择设置为display:none的文本输入。

我建议使用重置按钮。

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

而且，如果您愿意，您可以在表单上手动触发它。

$("#contactForm")[0].reset();

这是一把小提琴：http://jsfiddle.net/Tentonaxe/cCg7t/

相关文章：