jQuery addClass() 仅当前面有一个alert() 框时才起作用

Question

我有如下按钮-

<input type="button" onclick="validateAllAnswers(event);" value="Submit" id="tab_button1" class="btn btn-info"/>

function validateAllAnswers(e) {
    var isCompleteTabOne = true;
    var isCompleteTabTwo = true;
    var isCompleteTabThree = true;
    var flag = true;
    if (isCompleteTabOne == false && isCompleteTabTwo == false) {
        flag = false;
        alert("You missed a question(s) in Questionnaire One. Please answer before submitting the quiz!");
        document.getElementById("TabQuestionnaireOne").click()
        $("#TabQuestionnaireOne").addClass("active");
        for (var i = 0; i < noQuestionsTabOne; i++) {
            if (!($('input[name=tab1_radio_' + i + ']').is(':checked'))) {
                alert("111")
                e.stopPropagation();
                $('label[id=highlight_tabOne_' + i + ']').addClass('highlighter');
            }
        }
    }
}

问题:当我前面有一个alert() 时，addClass 方法工作得很好。但是，如果没有alert()，颜色就不会改变。另外，我尝试使用 event.stopPropagation()。这并没有解决我的问题。有人可以让我知道我在这里缺少什么吗？提前致谢!

Answer 1

您的表单似乎正在提交，然后页面会重新加载，从而清除表单并中止可能由提交触发的任何脚本。 另外，您最好监听表单的提交事件，因为可能还有其他方式触发该事件，例如 ENTER 键等

更好的方法是:

<!--HTML-->
<form id="myform" action="...." ...>
.....
<input type="button" value="Submit" id="tab_button1" class="btn btn-info"/>
</form>

//JS
$(function() {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
        //your code goes here
        //you may also want count any unfilled fields and use e.preventDefault()
        //if the # is greater than zero
        //OR use e.preventDefault() at the top
        //then use this.submit() if all fields are filled/provided/checked
    });
});