Reset jquery .click functions on call

Question

I'm trying to make a kind of quiz script. It's loading questions and keeping score but the "click" tag seems to be added with every new question. Instead of being changed. This leads to strange counting behavior which makes my script unusable. Is there someway that i can "reset" the click function? I've allready tried "overwriting" them but that doesn't seem to work.

var vragenArray = ["zero","Bla bla bla?","Boem Boem Boem?","Boing Boing Boing?","Floep Floep Floep?"];
var antA_Array = ["zero","antwoord1_a","antwoord2_a","antwoord3_a","antwoord4_a"];
var antB_Array = ["zero","antwoord1_b","antwoord2_b","antwoord3_b","antwoord4_b"];
var antC_Array = ["zero","antwoord1_c","antwoord2_c","antwoord3_c","antwoord4_c"];
var antD_Array = ["zero","antwoord1_d","antwoord2_d","antwoord3_d","antwoord4_d"];
var juistArray = ["zero","B","C","B","A"];
var aantalVragen = 21;
var counterVragen = 0;
var score = 0;
function laadVraag(){
    console.log("laadVraag geladen");
    counterVragen++;
    $("#vraagNummer").text(counterVragen);
    $("#vraag").text(vragenArray[counterVragen]);
    $("#antA").text(antA_Array[counterVragen]);
    $("#antB").text(antB_Array[counterVragen]);
    $("#antC").text(antC_Array[counterVragen]);
    $("#antD").text(antD_Array[counterVragen]);
    $("#score").text(score);
    $("#correct").text(juistArray[counterVragen]);
    $("#antA_click").click(function(){ laadVraag(); });
    $("#antB_click").click(function(){ laadVraag(); });
    $("#antC_click").click(function(){ laadVraag(); });
    $("#antD_click").click(function(){ laadVraag(); });
    juisteAntwoord(juistArray[counterVragen]);  
};
function juisteAntwoord(antwoord){
    console.log("juisteVraag geladen");
    $("#antB_click").click(function(){
        score++;
        laadVraag();
    });
};
$(document).ready(function() {
    laadVraag();
});

Here is a jsFiddle with the current script. http://jsfiddle.net/D7MMa/1/

Hope someone can help me out! :)

score 3 · Answer 1 · answered Jul 21 '14 at 06:20

3

You can use .off()

Description: Remove an event handler.

Code

$(selector).off('click').on('click', function(){
    //Your Code
});

Update Fiddle

answered Jul 21 '14 at 06:20

Satpal

126,885
12
146
163

score 1 · Answer 2 · edited May 23 '17 at 10:33

I think a similar question was answered here, Basically what he is saying is that you can call unbind() to remove all click events

$('#elemendId').unbind('click');

but also that the API has been updated and .bind()/.unbind() are still available only for backwards compatibility purposes, and that you should use the off/on functions like so

$('#elemendId').click(function() { return false; }); // Adds another click event
$('#elemendId').off('click');
$('#elemendId').on('click.mynamespace', function() { /* Do stuff */ });
$('#elemendId').off('click.mynamespace');

You should read the post in the previous answer as he explains this in more detail. >Examples taken from the post above.

Edit: You can find the Fiddle using the .unbind('click') method here and with the off() method here

Can u please provide jsFiddle also ? – Pratik Jul 21 '14 at 06:27 — Pratik, Jul 21 '14 at 06:27
Done, both with .unbind() and .off() methods – hahaha Jul 21 '14 at 06:39 — hahaha, Jul 21 '14 at 06:39

Reset jquery .click functions on call

2 Answers2