javascript - jQuery onClick 事件未触发

Question

我正在创建一个硬编码在 HTML 表单中的多项选择测试，我正在使用 JavaScript 和 jQuery 来执行与该表单相关的所有操作。但是，我的 onClick 事件似乎没有触发。查看控制台，我发现它 Hook 到 ID 为“submission”的事件，并且它移动到“on”，在点击事件时它刷新浏览器而不是触发 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

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