Question

我有一个使用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;
    });

我玩过订单节目表格＆gt;清除它，清除表格 - ＆gt;显示它。但由于某种原因，即使我看到它使用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，但不会将其清除。只有在输入可见后才会清除它。

Answer 1

我假设您的代码中的“...”是您省略对话框加载代码的地方。我认为正在发生的事情是您的清算代码在错误的时间运行。如果你正在使用jQueryUI模式使用它的'open'事件：

$('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（）正在进行的操作）。

Answer 2

我解决了这个问题。当我回头看它时，现在看起来很傻。 .not(':hidden')就是问题所在。我认为

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

与设置为text的{{1}}输入不匹配但显然确实如此。请在此处自行测试：http://jsfiddle.net/rawsmell/pDe43/2/，删除display:none，然后按预期工作。

:hidden

<强> CSS

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

<强> ONCLICK

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

总而言之，脚本的问题是可以使用$(':input') .not(':submit, :reset, :button') .val('') .removeAttr('checked') .removeAttr('selected'); //this DOES work $('div#contact').fadeIn(); return false;选择设置为display:none的文本输入。

Answer 3

我建议使用重置按钮。

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

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

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

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

为什么这个jQuery重置方法无法正常工作？

3 个答案: