Script runs twice on click

[TheBnl]

Hi! I am making a little game for iOS using apache's Cordova.I use Zepto.js as a light css3 jQuery replacement for animations etc. Players have to create letters as Wim Crouwel did in his New Alphabet, they have to do it in a short amount of time, thus far the project is going fine for the limited skills i have but now i am encountering a problem and i dont know where it could come from. What happens is that when i validate if a letter hase been constructed correctly and it is in fact correct it adds 2 "levels" instead of just 1, what i discovered is that the script actually runs twice. It even reacts tot the amounts of clicks i made on the page, lets say i click 4 "clickable" element's on the page it ads 4 levels. This is what i get in the console:

2 clicks = 2 levels up?validating...correct! go from level 0 to..1validating...correct! go from level 0 to..2

here is a live demo:http://bram-de-leeuw...welGame/(you'll probably have to resize your browser to make it work, the first thing you'll see is a iPhone5 version that isn't styled correctly. When you'll make your browser smaller it will show a iPhone 4 version.) This is the validation code:

// Validate Letter A$("#verder").click(function () {//if (Level = 0){ // LETTER = A  // CORRECT  console.log("validating...");  if (   // LETTER A   $(".CenterBottom").hasClass("black") === true &&   $(".CenterRight").hasClass("black") === true &&   // NOT LETTER A   $(".CenterLeft").hasClass("black") === false &&   $(".CenterTop").hasClass("black") === false &&   // ETC..     ){ // IF ITS CORRECT	console.log("correct! go from level 0 to..")	Level++;	$("#alert-fact").animate("Alert", {duration:2000, easing: 'ease'});	$(".CenterBottom").animate("Correct", {duration:2000, easing: 'ease'});	$(".CenterRight").animate("Correct", {duration:2000, easing: 'ease'});  	console.log(Level);  // SOMETHING IS MISSING  } else if (   $(".CenterBottom").hasClass("black") === true &&   $(".CenterRight").hasClass("black") === false ||   $(".CenterRight").hasClass("black") === true &&   $(".CenterBottom").hasClass("black") === false     ) {   $("#alert-missing").animate("Alert", {duration:2000, easing: 'ease'});	if ($(".CenterBottom").hasClass("black") === true) {	 $(".CenterBottom").animate("Correct", {duration:2000, easing: 'ease'});	};	if ($(".CenterRight").hasClass("black") === true) {	 $(".CenterRight").animate("Correct", {duration:2000, easing: 'ease'});	};  // WRONG  } else {   $("#alert-wrong").animate("Alert", {duration:2000, easing: 'ease'});  };//};//if (Level = 1){ // LETTER = B//};});

Edited March 12, 2013 by TheB

[justsomeguy]

The problem is because your Segment function assigns click handlers to #verder and #terug, so every time the Segment function runs it adds another click handler to do the same thing.