JavaScript variable unset after the second click event time

Question

I have this code which asks a question;

askQuestion()

which runs as the page loads and runs again when a button with id

wb_option_button

is clicked. But I noted that at the first click, its runs well, but the second click never never run. I want to know what is wrong with it (in case), and how to do it work.

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.

Thanks, I tried it but no luck. it failed to rerun. – Dr. Professor Feb 17 '15 at 22:34 — Dr. Professor, Feb 17 '15 at 22:34

G Roy · Accepted Answer · 2015-02-17T22:28:46.537

0

All of your buttons have the same ID. When you get an Element by id, it will only return the first element it finds with this id. If you want to get multiple elements you have to get them with another selector, ie. by className or any other means then by ID.

Edit : You are in fact selecting the buttons by className. The problem is that when you call askQuestion() again, the click listener is not added to the new buttons, so you might want to move the click event assignment inside askQuestion

Hope this helps.

edited Feb 17 '15 at 22:28

answered Feb 17 '15 at 22:19

G Roy

166
3

Thanks your gratefulness, I did a little more digging around it and finally got it work. Thanks to this link; [link]http://stackoverflow.com/questions/12065329/jquery-adding-event-listeners-to-dynamically-added-elements – Dr. Professor Feb 18 '15 at 00:01

score 0 · Answer 2 · answered Feb 18 '15 at 00:08

After a little more digging, I arrived at this solution which works perfectly.

 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 variable unset after the second click event time

2 Answers2