jquery如何清除模态输入字段以供重用

Question

我有一个使用 jquery 和 twitter 引导程序的模态表单。我已经设置了模态，所以当这个人取消表单时，/关闭模态我清除输入字段。但是，如果该人再次激活模态并将值输入到字段中，则 dom 仍将字段值视为 null。

这是我的表单 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">&nbsp;</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">&nbsp;</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>

这是我的 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();
});

现在表单是动态的，可以在用户之间更改。关于在取消/关闭时清除表单但在用户更改值时仍让值被识别的任何想法？

Answer 1

通过使用“删除”.remove()，您可以有效地将整个 DOM 转储到垃圾箱中，从而删除所有事件侦听器。

因此，您应该只使用$('.modal-body', '#forgotPassModal').empty(); 隐藏您的模态或清除正文。

Answer 2

您可以“重置”输入的值，而不是从 DOM 中删除 div。

示例：http://jsfiddle.net/dMbXV/

$('#forgotPassModal').on('hidden', function () {
    $('input').val('');
});