Question

我查了一下，发现了其他问题，但没有真正回答我的需要。我正在使用引导带，并有一个模式用于一组忘记密码挑战问题。我能够让模态出现并消失。但是我的问题是如果第二次调用窗口提交按钮不起作用。

on hidden我正在清除表单值并删除模式

$('#forgotPassModal').on('hidden', function () {
    $("#forgotPassForm input").each(function () {
        $(this).val(null);
    });
    $('#forgotPassModal').remove();
});

所以这是我遇到问题的情景

用户进入页面并激活模态，取消模态，然后再次激活模态。然后，用户填写问题并单击“提交”按钮。

在这种情况下，提交按钮不会激活其点击事件

这是点击代码。

$('#forgotPassSubmit').click(function() {
        var questAnswered = true;
    for (var i = 0; i < $forgotPassQuest.questionId.length; i++){
            var questionId = $forgotPassQuest.questionId[i]['id'];
        if ($('#forgotPass_' + questionId).val() == '' || $('#forgotPass_' + questionId).val() == null){
            questAnswered = false;
        } else {}
    }
    if (questAnswered == true) {
        submitAnswers();
    } else {
        alert('please complete your security questions.');
    }
});

如果用户调用模态并回答问题并点击提交则有效如果您调用模态，取消，再次调用它并提交它无效。

我错过了什么？

感谢

杰夫

Answer 1

（不能评论不够代表）

之前我遇到过这个问题，请检查以确保弹出窗口没有作为另一个兄弟姐妹添加到DOM中。因为你有一个提交按钮作为一个ID，如果它在DOM中找到两次，它将打破页面。

2个修正：

首先 - 无论您在哪里构建或打开弹出窗口，都要添加$(popup's class/id).hide();作为该函数的第一行。这将确保在第二次未完全删除后不再创建弹出窗口。

第二次 - 不要为提交按钮分配ID，而是通过类.forgotPassSubmit在代码中出现的任何地方进行操作。这应该避免出于任何原因在DOM中存在多个的情况，并且仍允许您在其上挂钩点击操作

亚历

如何破坏bootstrap模式但稍后再次使用

1 个答案: