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();
})