How to stop jQuery page elements from repeating?

Question

My jQuery code runs when I click a link. However, if I click the link multiple times, the code will repeat itself and appear under the previous code, which I don't want it to do. Also, if I click the "close" option, and reopen it, it will have repeated. How do I stop it from doing this? Here is the code, by the way:

$("#pop").click(function() {
    $("#overlay_form").fadeIn(1000);
    $("#statsStr").append('<br />' + strOne).fadeIn(1000);
    $("#statsCun").append('<br />' + cunOne).fadeIn(1000);
    $("#statsAgil").append('<br />' + agilOne).fadeIn(1000);
    $("#statsWis").append('<br />' + wisOne).fadeIn(1000);
});

$("#close").click(function(){
    $("#overlay_form").fadeOut("slow");
    $("#statsStr").fadeOut("slow");
    $("#statsCun").fadeOut("slow");
    $("#statsAgil").fadeOut("slow");
    $("#statsWis").fadeOut("slow");

});

Thanks for the help!

EDIT: I have taken the suggestion to change my code to this:

// append the strings only once on load
$(function() {
    $("#statsStr").append('<br />' + strOne);
    $("#statsCun").append('<br />' + cunOne);
    $("#statsAgil").append('<br />' + agilOne);
    $("#statsWis").append('<br />' + wisOne);
});

$("#pop").click(function() {
    $("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeIn(1000);
});

$("#close").click(function(){
    $("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeOut("slow");
});

And while it works great, there is one problem. The game I am making requires the "#pop" function to update every once in a while to display what your "stats" are. Is there any way to refresh the code so that it will display the updated variables?

Answer 1

EDIT try this for your solution:

//call this method whenever you want to update your stats
//passing in the variables
var updateStats = function(str, cun, agil, wis) {
    $("#statsStr").html('<br />' + str);
    $("#statsCun").html('<br />' + cun);
    $("#statsAgil").html('<br />' + agil);
    $("#statsWis").html('<br />' + wis);
};

$("#pop").click(function() {
    $("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeIn(1000);
});

$("#close").click(function(){
    $("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeOut("slow");
});
$(document).ready(function() {
    // assuming you have set these variables in the current scope.
    updateStats(strOne, cunOne, agilOne, wisOne);
});

Answer 2

It sounds like what you really want to do is show the #overlay_form on pop and hide it on close.

You could add the html to the page when it is rendered but use display none. That way you can simply show / hide when you click pop or close.

See if this example has the behavior you would like.

http://jsfiddle.net/qh4eN/1/

<style>
#overlay_form {
    display: none;
}
</style>

<div>
   <span id="pop">pop</span>
   <span id="close">close</span>
    <div id="overlay_form">
        <div id="statsStr">statsStr</div>
        <div id="statsCun">statsCun</div>
        <div id="statsAgil">statsAgil</div>
        <div id="statsWis">statsWis</div>        
    </div>
</div>

<script>
var strOne = "strength";
var cunOne = "constitution";
var agilOne = "agility";
var wisOne = "wisdom";

$("#pop").click(function() {
    $("#statsStr").text(strOne);
    $("#statsCun").text(cunOne);
    $("#statsAgil").text(agilOne);
    $("#statsWis").text(wisOne);
    $("#overlay_form").fadeIn(1000);
});

$("#close").click(function(){
    $("#overlay_form").fadeOut("slow");
});
</script>

Answer 3

Consider using one() instead, which only triggers the event once.