javascript - jQuery onClick 事件未触发

Question

我正在创建一个以 HTML 格式硬编码在表单中的多项选择测试，并且我正在使用 JavaScript 和 jQuery 来执行与表单相关的所有操作。但是，我的 onClick 事件似乎没有触发。在控制台中查看，我发现它使用 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

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

Answer 2

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

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

Answer 3

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

 <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 ++;
        }
    }
}

Here's 一个同样的工作笔。

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