Question

http://jsfiddle.net/nhZXg/36/

When the correct answer is clicked, me – John :), the score increments. Problem is that when you keep clicking John the score keeps incrementing.

I have done my research and found .unbind() jquery code but not sure how to implement it or if that even is the best solution.

What would people suggest.

Preferably I’d want the script to find the button that was clicked, instead of saying if(button1) was clicked, as an example, because this quiz may get quite big and that would be tedious.

Thanks in advance.

UPDATE:
Using this code now:
http://jsfiddle.net/nhZXg/38/

But it still will not function.

The page I am using this on is:
http://elearning.easy2dev.com/quiz_template_2.php

Any ideas why? I have included the jQuery 1.7.1 library too!

Done! 🙂

Answer 1

If you want to execute any event handler only once then use jQuery one to bind the event handler. It will unbind itself once the event is triggered.

$('input:radio').one('click', function(){
     //do stuff here
});

You can change the logic in your code and try to make use of it but here is what you can try as per your code.

function scoreIncrement(elem) {//where elem is the radio button element that is clicked
    if(!$(elem).data('scored')){
       score++;
       document.getElementById("score").innerHTML = score;
       $(elem).data('scored', true);
    }
}​

Working demo – http://jsfiddle.net/nhZXg/38/