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

Question

我有这段代码提出了一个问题;

askQuestion()

它在页面加载时运行，并且当点击具有ID

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得到一个元素时，它将只返回它找到的第一个元素。如果你想获得多个元素，你必须让他们与另一个选择器，即。通过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"); 
    } 
});