Question

我有这个代码提出问题;

askQuestion()

在页面加载时运行，并在单击标识为

wb_option_button

的按钮时再次运行。但我注意到，在第一次点击时，它运行良好，但第二次点击永远不会运行。我想知道它有什么问题（以防万一），以及如何运作。

var q_selected;
var q_number = 1;
var questionDiv = $('.wb_questions');
var optionDiv = $('div#wb_options');
function askQuestion()
{
    questionDiv.html(questions[q_number]['question']);
    optionDiv.html('<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][0]+'</button>'+
    '<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][1]+'</button>'+
    '<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][2]+'</button>'+
    '<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][3]+'</button>'
); 
}
function checkAnswer(q_answer)
{
    if(q_selected === q_answer)
    {
        return true;

    }
}
function isCheckpoint()
{
    if(checkpoints[q_number]!=null)
    {
        return true;
    }
    else
    {
        return false;
    }
}
askQuestion();

$('button.wb_option_button').click(function(){
    q_selected = $(this).text();
    if(checkAnswer(questions[q_number]['answer'])===true)
    {
        if(isCheckpoint()===true)
        {
            showRank(q_number);          
        }
        else
        {
            q_number+=1;
            //alert(q_number);
            askQuestion();
            // showStage();
        return q_number;
        }        
    }
    else
    {
        alert("You failed");
    }
});

var questions is an object, var checkpoints ia also an object.

Answer 1

所有按钮都具有相同的ID。当您通过id获取Element时，它将仅返回它使用此id找到的第一个元素。如果你想获得多个元素，你必须使用另一个选择器，即。通过className或任何其他方式，然后按ID。

编辑：您实际上是按className选择按钮。问题是，当您再次调用askQuestion()时，点击侦听器不会添加到新按钮，因此您可能希望在askQuestion

中移动点击事件分配

希望这有帮助。

Answer 2

经过多一点挖掘后，我找到了完美的解决方案。

 Thank you all for your help!!!

$('.wb_options').on('click','.wb_option_button',function(){

    q_selected = $(this).text();
    if(checkAnswer(questions[q_number]['answer'])===true)
    {
        if(isCheckpoint()===true)
        {
            showRank(q_number);          
        }
        else
        {
            q_number+=1;

            askQuestion();
            alert(q_number);
           // showStage();
           //return q_number;
        }        
    }
    else
    {
        alert("You failed");
    }
});

第二次单击事件时间后，JavaScript变量未设置

2 个答案: