为什么此jQuery .change事件在.click事件之后停止工作 [英] Why does this jQuery .change event stop working after .click event

问题描述

我有一个脚本，该脚本显示数组中的问题，并使用两个按钮上一个和下一个按钮上的.click事件从一个问题切换到下一个问题.当我加载页面时，$(":radio").change选择器可以正常工作，但是当我单击上一个或下一个时，它将停止工作.

I have a script that displays questions from an array and switches from one question to the next using the .click event on two buttons: previous and next. When I load the page the $(":radio").change selector works fine, but when I click on previous or next it stops working.

我尝试将$("#previous)更改为console.log，以查看.click是否是罪魁祸首，并且它似乎正在工作.我认为显示功能出了点问题，但是我似乎无法弄清楚为什么.

I tried changing the $("#previous) to a console.log to see if .click was the culprit and it seems to be working. I assume there is something wrong with my display function but I can't seem to figure out why.

这是 jsFiddle .这是 GitHub

问题数组

var quizQuestions =
[{
    question: "1. Who is Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer:0
},
{
    question: "2. Who is Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer:2
},
{
    question: "3. Who is Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer:1
}];

JavaScript代码(jQuery)

$(document).ready(function(){
    var all = quizQuestions,
        q = $("#question"),
        c = $("#choices"),
        ans = [],
        current = 0;

    display(current);

    function display (id) {
        var question = all[id].question;
        var choices = all[id].choices;

        q.html(question);
        c.html(function(){
            var output = "<form>";
            for (var i = 0; i < choices.length; i++) {
                output += "<input type='radio' name='question" +id
                + "' value='" + choices[i] + "'> "
                + choices[i] + "<br>";
            };
            output += "</form>"
            // console.log(output);
            return output;
        });
    };

    function changeDisplay (dir) {
        if (dir == 'next' && current < all.length-1) current++;
        if (dir == 'prev' && current > 0) current--;
        display(current);
    }

    function answerQ (q, a) {
        ans[q] = a;
        console.log(ans);
    }

    $(":radio").change(function(){
        answerQ( $(this)[0].name, $(this).val() );
    });

    $("#previous").click(function (){ changeDisplay('prev'); });
    $("#next").click(function (){ changeDisplay('next'); });

    // console.log("all.length: " + all.length + " | ans: " + ans + " | current: " + current);
});

推荐答案

这很可能是因为未委派事件.加载页面后，您将绑定单击事件.但是随着dom的操作(删除元素)，事件将被删除.为此，您必须使用代理.

This is most likely because the event is not delegated. When the page is loaded you bind the click events. But as the dom is manipulated (elements removed) the events are deleted. You would have to use a delegate for this.

赞:

$('.container').on('change', ':radio', function(){
    answerQ( $(this)[0].name, $(this).val() );
});

编辑:我建议您保存或隐藏答案，而不要覆盖它们.这样可以更轻松地实现以前的功能.

I would suggest that you save or hide the answers instead of overwriting them. That would make it easier to implement the previous function.

这篇关于为什么此jQuery .change事件在.click事件之后停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！