為什么這個jQuery重置方法無法正常工作？

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

我玩過訂單顯示表格 - >清除它，清除表格 - >顯示它。 但由於某種原因，即使我看到它使用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')

不匹配設置為display:none的text輸入display:none但顯然確實如此。 在這里自己測試一下： 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;
}

ONCLICK

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

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

總而言之，腳本的問題是可以使用:hidden選擇設置為display:none的文本輸入。

Answer 3

我建議使用重置按鈕。

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

並且，如果您願意，可以在表單上手動觸發它。

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

這是一個小提琴： http ： //jsfiddle.net/Tentonaxe/cCg7t/