Question

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

这是我的表单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

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

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

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

Answer 2

通过使用“remove”.remove()，您实际上正在转储整个DOM介绍垃圾桶，删除所有事件侦听器。

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

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

2 个答案: