Android 4.4.2 tap event registering when unhiding element

This is weird. I have two images of a heart, one grey, one red. I use them to allow a user to 'favourite' an item in a list. When the grey heart is tapped I hide it and show the red heart. When the red heart is tapped I hide it and show the grey heart. Simple huh? You can see them in this pic here:

The code looks something like this:

       
      $( ".greyHeart" ).bind( "tap", function( event ){
                    
              $(this.parentNode).addClass('favourited');
              $(this.parentNode).removeClass('notFavourited');
                    
               //store data in array in local storage
           
        });

       $( ".redHeart" ).bind( "tap", function( event ){

              $(this.parentNode).addClass('notFavourited');
              $(this.parentNode).removeClass('favourited');
          
             //remove data from array in local storage

        });

This all works brilliantly across my desktop browsers, iOS and most Androids. Except 4.4.2.

In 4.4.2 it seems that the tap event is detected on the grey heart and then again the tap event is detected on the red heart too when it appears under the user's finger. The user sees the heart turn red then immediately grey again.

To get around this odd behaviour I had to change my code to immediately unbind tap events on detecting a tap, and then rebind them after a small delay.