Question

我正在开展一个测验项目，用户选择多项选择答案（单选按钮），然后点击链接继续下一个问题。如果未选择单选按钮，则无法单击该链接。选择单选按钮并单击链接后，将使用AJAX从MySQL数据库中提取下一个问题。

我遇到的问题是，如果用户双击该链接，则会跳过一个问题。因此，如果您遇到问题1并双击该链接，则会加载问题3而不是2。

如果链接是单击还是双击，jQuery中是否有一种方法只能触发一次事件？

由于

$('#next-question-click').on( "click", function(){
if ($('[name="radio-question"]').is(':checked')){
    var answer = $(".question-content ul li input:checked + label").text();
    question_number = question_number + 1;

    if(question_number<100){
        next_question(question_number);
    }
} else {
    $("#error-text").html('Please select an answer.');
}
    return false;
})

.on("dblclick", function(e){
    e.preventDefault();  //cancel system double-click event
});

Answer 1

您只需要通过添加一个类来执行执行。因此，只有当前问题没有改变时，您的代码才会执行。

现在，理想情况下，您应该在ajax调用的成功函数中从$('#next-question-click')中删除活动类以加载新问题，以确保该函数仅在加载新问题后执行

添加类的优点是它不会污染全局变量空间，因为要添加哪个类，它取决于您。我只是用active作为例子

$('#next-question-click').on("click", function () { if (!$(this).hasClass('active')) { if ($('[name="radio-question"]').is(':checked')) { $(this).addClass('active'); var answer = $(".question-content ul li input:checked + label").text(); question_number++; if (question_number < 100) { next_question(question_number); $(this).removeClass('active'); // this should go into the success/complete function of the ajax call } } else { $("#error-text").html('Please select an answer.'); } } return false; });

Answer 2

您正在寻找jQuery.one()功能。

Answer 3

我通常使用变量作为标志，而不是解除绑定和重新绑定事件。像这样......

var working = false;
$('#next-question-click').on( "click", function(){

    if (working) return false; //Dont do anything, basically.

    if ($('[name="radio-question"]').is(':checked')){
        var answer = $(".question-content ul li input:checked + label").text();
        question_number = question_number + 1;

        if(question_number<100){
            working = true;
            next_question(question_number);
        }
    } else {
        $("#error-text").html('Please select an answer.');
    }

    return false;
})

并且，在next_question函数中，在加载下一个问题并准备好回答之后，您将添加working = false;

双击两次触发事件

3 个答案: