jquery - HTML text does not re-appear with AJAX -

i'm trying use following code display , fade out text:

$('#submit_new_player_order').click(function(e){ //some data define data_to_send       $.post(ajaxurl, data_to_send, function() {     alert('it in here');     $('#fade_in_text_sort').html('your sort order being saved!'); }) .done(function() {     alert('done');     $('#fade_in_text_sort').html('we saved data!').delay(2000).fadeout('fast'); }) }); 

this works fine first time click submit button , displays text correctly. when click on submit again both alerts text never displayed again. since i'm using fadeout figured display again doesn't that. ideas why?

first time ajax done hide (fadeout) element, next time need show (before hide again):

$('#fade_in_text_sort').html('we saved data!').show(0).delay(2000).fadeout('fast'); 

here example button:

$('#submit_new_player_order').on('click', function(e) {      $('#fade_in_text_sort').html('we saved data!').show(0).delay(2000).fadeout('fast');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <p id="fade_in_text_sort"></p>  <button id="submit_new_player_order">submit new order</button>