-1

This is so simple, but I can't get it to work! On clicking a button, I'd like to change the icon in that button from fa-download to fa-spinner, but the fa-spinner just won't show up!

My HTML is:

<button id='save'><i class='fa fa-download' aria-hidden='true'></i> save work</button>

And my jQuery is:

$('body').on('click', '#save', function(e){
   $('#save').find('i').toggleClass('fa-download fa-spinner');
   $("#save").text("loading...");
});

The text changes to loading, the download icon goes away, but the spinner icon never shows up! What am I missing?!

tx291
  • 1,251
  • 6
  • 24
  • 42

2 Answers2

5

This is because the .text() function is removing your i element.

Maybe put the "save work" text in a span and target that to change its text to "loading..."?

Craig
  • 332
  • 1
  • 7
  • Ah!! I think you're right! Let me try that. Makes perfect sense. – tx291 Dec 14 '16 at 16:27
  • :) Glad that helps! JSFiddle above. – Craig Dec 14 '16 at 16:28
  • Beautiful! Totally fixed. Was staring at it too long to realize :) Thanks! Will mark as answer when S.O. lets me. – tx291 Dec 14 '16 at 16:29
  • Awesome, I know that feeling - just need a rubber duck to talk to! ;) [See Rubber Duck Debugging](https://en.wikipedia.org/wiki/Rubber_duck_debugging) – Craig Dec 14 '16 at 16:30
0

You can either toggleClass() or use addClass() or removeClass()

$('body').on('click', '#save', function(e){
   $(this).find('i').addClass('fa-download');
   $(this).find('i').removeClass('fa-spinner');
});
ScanQR
  • 3,740
  • 1
  • 13
  • 30
  • This will work, just as his code would be working. The issue is that the .text() function is removing the font-awesome element. – Craig Dec 14 '16 at 16:27