JQuery display problems?

Question

I'm new to JQuery and was wondering how can I have Changes saved! displayed only once even if the user presses the submit button multiple times for example if a user decides to change there info three different times the text, Changes saved!Changes saved!Changes saved! is displayed i only want Changes saved! displayed once.

How can I fix this problem? What part of my code needs to be fixed?

Here is the JQuery code.

$(function() {
    $('#changes-saved').hide();
    $('.save-button').click(function() {
        $.post($('#contact-form').attr('action'), $('#contact-form').serialize(), function(html) {
            $('div.contact-info-form').html(html);
            $('#changes-saved').append('Changes saved!').show();
        });

        $('a').click(function () {
            $('#changes-saved').empty();
            $('#changes-saved').hide();
        });

        return false; // prevent normal submit
    });
});

Answer 1

You can just set the html using .html(), this will replace the old value:

$('#changes-saved').html('Changes saved!').show();

.append() will add to what's there, .html() replaces it.

Answer 2

You could have a span on the page with your "Changes saved!" blurb and initialize it as display:none

<span style="display:none" id="changes-saved">Changes Saved</span>

Then

$('#changes-saved').show();