Hover not working on js generated class/element

Using the script below I am adding and removing favorite posts with some ajax and all is going well except for one small detail. If I click the .save-audition element, part of the behavior is to add the class .fa-check (which overlays a checkmark, indicating the post has been saved).

Then, when hovered, the checkmark (as seen at the end of the script) takes the class .fa-close (which turns the checkmark into an X) so that the user can click the and remove the post from their favorites.

But the hover effect is not working when the checkmark class is generated on the fly and I can’t figure out how to fix it.

jQuery(document).ready( function($) {

   $('.save-audition').on('click', function() {
      var post_id = $(this).attr("data-post_id")
      var nonce = $(this).attr("data-nonce")
      var clicked = $(this);


      $.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl, //we can use this value because in our php file we used wp_localize_script
         data : {action: "tps_save_audition", post_id : post_id, nonce: nonce},
         success: function(response) {
            if(response.type == "success") {
                clicked.children('span').children('.fa-stack-2x').addClass('fa-check');
                clicked.children('span').children('.fa-stack-1x').addClass('saved');
            } else if (response.type = "removed") {
                clicked.children('span').children('.fa-stack-2x').removeClass('fa-check');
                clicked.children('span').children('.fa-stack-1x').removeClass('saved');
            } else {
               alert(response.message);
            }
         }
      })   
    return false;
   });

   $('.actions .fa-check').hover(function(){
        $(this).addClass('fa-close');
        $(this).removeClass('fa-check');
        $(this).attr('title', 'Remove from saved');
        $(this).css('color', '#ff0000');
    }, function(){
        $(this).removeClass("fa-close");
        $(this).addClass('fa-check');
        $(this).attr('title', 'Save audition');
        $(this).css('color', '#00e20b');
    });

})

Snippet of corrosponding PHP/HTML:

$saved = get_user_meta(get_current_user_id(), 'saved_auditions', true);
                                    if (in_array($post->ID, $saved)) { 
                                        $checkClass = 'fa-check';
                                        $savedClass = 'saved';
                                    } else {
                                        $checkClass = '';
                                        $savedClass = '';
                                    }?>
                                    <a class="save-audition" data-nonce="<?php echo $nonce; ?>" data-post_id="<?php echo $post->ID; ?>" href="<?php echo $link; ?>">
                                        <span class="fa-stack">
                                            <i class="fa fa-save <?php echo $savedClass; ?> fa-stack-1x" title="Save Audition"></i>
                                            <i class="fa <?php echo $checkClass; ?> fa-stack-2x" title="Save Audition"></i>
                                        </span>
                                    </a>