jQuery addClass() 仅在它之前有一个 alert() 框时才有效答案

【问题标题】：jQuery addClass() works only when there is an alert() box before itjQuery addClass() 仅在它之前有一个 alert() 框时才有效
【发布时间】：2015-08-17 05:13:05
【问题描述】：

我有如下按钮-

<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()。那并没有解决我的问题。有人可以让我知道我在这里缺少什么吗？提前致谢！

【问题讨论】：

标签： jquery jsp addclass event-bubbling

【解决方案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
    });
});

【讨论】：

【解决方案2】：

onclick=" event.preventDefault();validateAllAnswers(event);" 。您必须停止提交表单。那么只有该功能才能正常工作。验证后，您必须使用 $("form")[0].submit() 手动提交 from

【讨论】：

嗨，我尝试在 onClick 事件中设置 event.preventDefault()。它仍然无法正常工作，并且没有更改颜色。我也尝试过 -

【解决方案3】：

我认为你的代码不会验证，请看这段代码，

var isCompleteTabOne = true;
var isCompleteTabTwo = true;
var isCompleteTabThree = true;
var flag = true;
// isCompleteTabOne and isCompleteTabTwo both are true here
if(isCompleteTabOne == false && isCompleteTabTwo == false)

另外，如果您使用jquery，则使用on() 来绑定点击事件，例如，

$(function(){
    $('#tab_button1').on('click',function(){
        // your validation code
    });
});

由于您使用的是按钮，因此无需阻止默认行为，也没有父元素，因此请避免使用stopPropagation()

【讨论】：

如果表单提交是因为没有什么可以阻止它（即警报）并且 OP 缺少实际发生的 addClass？

【解决方案4】：

我认为正在发生的事情是表单正在提交而您注意到 addClass。当您发出警报时，它将暂时停止执行。所以，你可以看到变化。我们需要停止提交，以便您看到更改。听起来对吗？

您可以尝试在函数中添加return false;...即；

function validateAllAnswers(e) {
  e.preventDefault();
  // Do whatever
  return false;
}

这将阻止重定向/提交发生。

然后您可以在两者之间添加任何代码，并在验证后根据需要提交。

【讨论】：