我的收音机更改事件最初仅在应用程序中触发

Question

我正在尝试制作一个测验应用程序，我希望更新分数。单击下一个问题时未触发单选按钮的更改事件。 https://codepen.io/abhilashn/pen/BRepQz

// JavaScript Document

var quiz = { "JS" : [
    {
        "id" : 1,
        "question" : "Inside which HTML element do we put the JavaScript?",
        "options" : [
            {"a": "<script>", 
             "b":"<javascript>", 
             "c":"<scripting>", 
             "d":"<js>"}
            ],
        "answer":"<script>",
    },
    {
        "id" : 2,
        "question" : "What is the correct JavaScript syntax to change the content of the HTML element below.",
        "options" : [
            {"a": " document.getElementById('demo').innerHTML = 'Hello World!';", 
             "b":" document.getElementByName('p').innerHTML = 'Hello World!';", 
             "c":" document.getElement('p').innerHTML = 'Hello World!';",
             "d":" #demo.innerHTML = 'Hello World!';"}
            ],
        "answer":" document.getElementById('demo').innerHTML = 'Hello World!';",
    }
    ]
}

var quizApp = function() {

this.score = 0;     
this.qno = 1;
this.currentque = 0;
var totalque = quiz.JS.length;


this.displayQuiz = function(cque) {
    this.currentque = cque;
    if(this.currentque <  totalque) {
        $("#qid").html(this.qno++);


        $("#question").html(quiz.JS[this.currentque].question); 
         $("#question-options").html("");
        for (var key in quiz.JS[this.currentque].options[0]) {
          if (quiz.JS[this.currentque].options[0].hasOwnProperty(key)) {
            //console.log(key + " -> " + quiz.JS[this.currentque].options[0][key]);
            $("#question-options").append(
                "<div class='form-check option-block'>" +
                "<label class='form-check-label'>" +
                          "<input type='radio' class='form-check-input' name='option'   id='q"+key+"' value='" + quiz.JS[this.currentque].options[0][key] + "'>" +
                              quiz.JS[this.currentque].options[0][key] +
                         "</label>"
            );
          }
        }
    } else {
        return alert("Your score: " + this.score) ; 
    }
}

this.checkAnswer = function(option) {
    var answer = quiz.JS[this.currentque].answer;
    option = option.replace(/\</g,"&lt;")   //for <
    option = option.replace(/\>/g,"&gt;")   //for >
    console.log(answer);
    console.log(option);

    if(option ==  quiz.JS[this.currentque].answer) {
        this.score = this.score + 1;
        console.log(this.score);
    }
}   

this.changeQuestion = function(cque) {
        this.currentque = this.currentque + cque;
        this.displayQuiz(this.currentque);  

}

}

var jsq = new quizApp();

$(document).ready(function() {
        jsq.displayQuiz(0);     
        $('input[type=radio][name=option]').change(function(e) {
        e.preventDefault();
    if (this.checked) {
        jsq.checkAnswer(this.value);
    }
});

});




$('#next').click(function(e) {
    e.preventDefault();
        jsq.changeQuestion(1);
}); 

Answer 1

您只是将事件处理程序应用于已经存在的元素，而不是稍后将创建的元素。

事件处理程序应该在一个元素上，该元素是所有未来元素的父元素。

像这样：

$('#question-options').on('change', 'input[type=radio][name=option]', function(e) {
  // code
});

来自on 上的 jQuery 文档：

事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用 .on() 时存在。为了确保元素存在并且可以被选择，[...] 使用委托事件来附加事件处理程序。

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。