javascript - jQuery onClick事件未触发

Question

我正在创建一个以HTML格式硬编码的多项选择测试，我正在使用JavaScript和jQuery来执行与表单相关的所有操作。 但是，我的onClick事件似乎没有被解雇。 在控制台中查看我发现它使用id“submission”挂钩到事件中并且它移动到“on”并且在click事件中它刷新浏览器而不是触发submitAnswers（）函数。

<form name="javaScriptQuiz" id="jsTest">

 <div class="form-group quiz-questions">
 <h3>1. First question is either true or false.</h3> 
  <label for="q1a">
   <input type="radio" name="q1" value="a" id="q1a"> A. True &nbsp;
  </label>
  <label for="q1b">
   <input type="radio" name="q1" value="b"  id="q1b"> B. False &nbsp;
  </label>
  <h3>2. Second question is either true or false.</h3>
  <label for="q1a">
   <input type="radio" name="q1" value="a" id="q1a"> A. True &nbsp;
  </label>
  <label for="q1b">
   <input type="radio" name="q1" value="b"  id="q1b"> B. False &nbsp;
  </label>
 <input class="btn btn-primary btn-lg" type="submit" name="submit" value="Submit!" id="submission">

</form>

$('#submission').on('click', function() {
        console.log('Submit fires');
        submitAnswers();                    
});

function submitAnswers() {
    var total = 2;
    var score = 0;

    //captures each of the questions answers in a variable
    var q1 = document.form['javaScriptQuiz']['q1'].value;
    var q2 = document.form['javaScriptQuiz']['q2'].value;

    //Validation
    for(var i = 1; i <= total; i++ ){
        if(eval('q' + i) == null || eval('q' + i) == ''){
            alert('You missed a question');
            return false;
        }
    }

    // Are the answers to test
    var answers = ['b', 'a'];
    for(var i = 1; i <= total; i++){
        if(eval('q' + 1) == answers[i - 1] ){
            console.log('Evaluating answers');
            score ++;
        }
    }
}

Answer 1

您需要使用e.preventDefault()来防止submit按钮的默认行为，如下所示，

$('#submission').on('click', function(e) {
        console.log('Submit fires');
        e.preventDefault();
        submitAnswers();                    
});

Answer 2

所有HTML的Firs都无效。 两个问题的单选按钮具有相同的名称属性。 这是有效的标记： -

 <form name="javaScriptQuiz" id="jsTest">
 <div class="form-group quiz-questions">
 <h3>1. First question is either true or false.</h3> 
  <label for="q1a">
   <input type="radio" name="q1" value="a" id="q1a"> A. True &nbsp;
  </label>
  <label for="q1b">
   <input type="radio" name="q1" value="b"  id="q1b"> B. False &nbsp;
  </label>
  <h3>2. Second question is either true or false.</h3>
  <label for="q1a">
   <input type="radio" name="q2" value="a" id="q1a"> A. True &nbsp;
  </label>
  <label for="q1b">
   <input type="radio" name="q2" value="b"  id="q1b"> B. False &nbsp;
  </label>
 <input class="btn btn-primary btn-lg" type="submit" name="submit" value="Submit!" onclick="return submitAnswers();" id="submission">

</form>

剧本：-

function submitAnswers() {
  event.preventDefault();
    var total = 2;
    var score = 0;
    //captures each of the questions answers in a variable
    var q1 = document.form['javaScriptQuiz']['q1'].value;
    var q2 = document.form['javaScriptQuiz']['q2'].value;

    //Validation
    for(var i = 1; i <= total; i++ ){
        if(eval('q' + i) == null || eval('q' + i) == ''){
            alert('You missed a question');
            return false;
        }
    }

    // Are the answers to test
    var answers = ['b', 'a'];
    for(var i = 1; i <= total; i++){
        if(eval('q' + 1) == answers[i - 1] ){
            console.log('Evaluating answers');
            score ++;
        }
    }
}

这是一支相同的工作笔。

Answer 3

尽量不要为提交类型元素使用名称“submit”，这不是一个好主意。 但我看到的唯一错误是函数submitAnswers（）中缺少s字母： document.form而不是document.forms 。 我试过你的代码，它适用于最新的Firefox。

Answer 4

在你的代码中，改变

<input class="btn btn-primary btn-lg" type="submit" name="submit" value="Submit!" id="submission">

至

<input class="btn btn-primary btn-lg" type="button" name="submit" value="Submit!" id="submission"/>

或者您可以在输入标记本身中调用函数本身，如onclick =“your_function_name（）”。 对于您的代码，它将是：

<input class="btn btn-primary btn-lg" type="button" name="submit" value="Submit!" id="submission" onclick = "submitAnswers()"/>

希望这可以帮助..！！

Answer 5

解决方案1：将提交按钮的类型更改为按钮

<input class="btn btn-primary btn-lg" type="button" name="submit" value="Submit!" id="submission">

解决方案2：将您的点击事件更改为表单提交

$('#jsTest').on(submit,function(){
     ....});

Answer 6

单击type="input"的输入的默认行为是提交包含输入的表单。

因此，如果您不希望它提交表单，则需要添加表单提交处理程序并防止发生默认行为：

$('#jsTest').on('submit', function(e) {
    e.preventDefault();
})