Css selectors not working after .attr('class' 'newClass')

Css selectors not working after .attr('class' 'newClass')

I am trying to make a block/unblock feature that when the block button is clicked unblocked appears and then the user can then be immediately unblocked. This is working fine if I block, manually fresh, hit unblock. Works wonderfully in fact. The problem arises when I try to unblock before doing a page refresh. It tries to block again instead of unblocking even though the class is set up as .unblockUser

   jQuery('.blockUser').click(function() {

      var id = (this.id);

      jQuery.getJSON("http://www.unravelthemusic.com/users/block/" + id,

        function(data){

         if (data.result == true)

         {

            jQuery('.blockUser').text('Unblock');
            jQuery('blockUser').attr('class', 'unblockUser');

         

         } else {

            jQuery('.blockUser').text('Error');

         }

      });

      return false;



   });
   
   jQuery('.unblockUser').click(function() {

      var id = (this.id);

      jQuery.getJSON("http://www.unravelthemusic.com/users/unblock/" + id,

        function(data){

         if (data.result == true)

         {

            jQuery('.unblockUser').text('Block');
            jQuery('unblockUser').attr('class', 'blockUser');

         

         } else {

            jQuery('.unblockUser').text('Error');

         }

      });

      return false;



   });   


Any ideas on how to do this better would be much appreciated.[/code]