How not to add multiple listeners

[m2244]

Hello,

The code below is called when a user clicks a 'Submit' button. The problem is the line highlited below, each time they click it adds an additional listener so the event fires twicethe second time, three times the third time, etc.

What is the best way to avoid adding unwanted listeneres like this?

function checkAnswer()
{
	alert(chosenAnswer);
	if(chosenAnswer == correctAnswer)
	{		
		var xmlFeedBack = "";
		$(questionArr[questionIndex]).find('answer').each(function(){
			if($(this).find('aText').text() == chosenAnswer)
			{
				xmlFeedBack = $(this).find('feedback').text();
				alert(xmlFeedBack);
			}
		});

		$("#feedback").html('<img src="../js_know_check/course_assets/kcbtnsprite.png" /><br/>' + xmlFeedBack + "<br/><br/>Click This Message Box to Continue.");
		questionIndex++;
		$("#feedback").click(function (evt) {alert("You clicked the message box! Great");displayQuestion()});
		numCorrect++;
	}
}

[WolfShade]

At the start of the code, set a global variable to false. Then, when the link is clicked, set it to true. Put a conditional around the highlighted line - if variable = false { code }. That way, if the variable is true, it won't fire.

[Dormilich]

I would just define the click handler outside the checkAnswer() function.

[felgall]

Another alternative would be to have the event listener remove itself again when it runs - that way it can only run once for each time it is added.