I am relatively new to jQuery and I'm having some difficulty using .on(). Right now, I am just trying to get a feel for how this method works by creating a demo that shows and hides a div when an anchor is clicked. I know that .toggle() can be used to show/hide elements but I want to learn .on() so that I can use it for more advanced things later on. From what I understand, it will be used in place of .live() from now on. 

The first time a#hide is clicked, it should hide div#hideMe, change div#hideMe's id to #showMe, change the id of a#hide to a#show, and finally change the text of a#show from 'Hide The Div' to 'Show The Div'.

The next time a#show is clicked, it should do the opposite of the first actions: it should show div#showMe, change div#showMe to div#hideMe, change a#show back to a#hide and change the text of a#hide to 'Hide The Div'

My code will successfully hide div#hideMe, change it's id to div#showMe, change a#hide to a#show and change a#hide's text to 'Show The Div' but the second part of the code that is supposed to show the div#showMe does not run when I click the a#show link and I have no idea why. 

Here is the code that I am using:

1. $(document).ready(function(){
   $('#hide').on('click',function(){
   $('#hideMe').hide('slow');
   $('#hideMe').attr('id','showMe');
   $(this).attr('id','show');
   $(this).text('Show The Div');
   });
   $('#show').on('click',function(){
   $('#showMe').show('slow');
   $('#showMe').attr('id','hideMe');
   $(this).attr('id','hide');
   $(this).text('Hide The Div');
   });
   });