twitter-bootstrap jquery如何清除模态输入字段以供重用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17925463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery how to clear out modal input fields for reuse
提问by jeff werner
I have a modal form using jquery and twitter bootstraps. I have set up the modal so when the person cancels the form, / closes the modal i clear out the input fields. however if the person activates the modal again and enters values in to the fields, the dom still sees the field value as null.
我有一个使用 jquery 和 twitter 引导程序的模态表单。我已经设置了模态，所以当这个人取消表单，/关闭模态时，我会清除输入字段。但是，如果此人再次激活模态并在字段中输入值，dom 仍会将字段值视为空值。
here is my form html
这是我的表单 html
<div class="modal fade in" id="forgotPassModal" data-b-view="ForgotPass" data-brite-cid="bview_1" tabindex="-1" aria-hidden="false" style="margin-top: -152.66666662693024px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Security questions:</h3>
</div>
<div class="modal-body">
<p>
Please answer the following security questions, click 'Submit', and you
will receive an email containing instructions on how to change your password.
</p>
<div class="form-horizontal">
<fieldset id="forgotPassForm">
<div class="control-group">
<label class="span3" "label_4"="">What was the last name of your third grade teacher?</label>
<div class="controls">
<input type="text" class="input-large" id="forgotPass_4">
</div>
</div>
<div class="clearfix"> </div>
<div class="control-group">
<label class="span3" "label_165"="">What is your maternal grandmother's maiden name, please provide full name?</label>
<div class="controls">
<input type="text" class="input-large" id="forgotPass_165">
</div>
</div>
<div class="clearfix"> </div>
</fieldset>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary forgotPassSubmit">Submit</button>
</div>
and here is my jquery
这是我的 jquery
for (var i = 0; i < $forgotPassQuest.questionId.length; i++){
var questionId = $forgotPassQuest.questionId[i]['id'];
$('#forgotPass_' + questionId).val(null);
}
$('#forgotPassModal').modal({show:true})
$('.forgotPassSubmit').click(function() {
var questAnswered = true;
for (var i = 0; i < $forgotPassQuest.questionId.length; i++){
var questionId = $forgotPassQuest.questionId[i]['id'];
questionField = $('#forgotPass_' + questionId);
questionFieldVal = questionField.val();
if (questionFieldVal == '' || questionFieldVal == null){
questAnswered = false;
} else {}
}
if (questAnswered == true) {
submitAnswers();
} else {
alert('please complete your security questions.');
}
})
$('#forgotPassModal').on('hidden', function () {
$('#forgotPassModal').remove();
});
now the form is dynamic and can change from user to user. Any ideas on a way t clear the form out on cancel/close but still let the value be recognized when the user does change the value?
现在表单是动态的，可以随用户变化。有什么想法可以在取消/关闭时清除表单，但在用户更改值时仍然让该值被识别？
回答by Hyman
Instead of removing the divfrom DOMyou can "reset" the values of the inputs.
您可以“重置”输入的值，而不是div从中删除DOM。
Example: http://jsfiddle.net/dMbXV/
示例：http: //jsfiddle.net/dMbXV/
$('#forgotPassModal').on('hidden', function () {
$('input').val('');
});
回答by ReSpawN
By using "remove" .remove(), you are effectively dumping the entire DOM intro the trashcan which removes ALL event listeners.
通过使用 "remove" .remove()，您可以有效地将整个 DOM 引入垃圾桶，从而删除所有事件侦听器。
Thus, you should only hide your modal OR clear the body using $('.modal-body', '#forgotPassModal').empty();.
因此，您应该只隐藏您的模态或使用$('.modal-body', '#forgotPassModal').empty();.
