Hover not working on js generated class/element

Question

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>

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

That is because the hover event listener is bound before the elements are dynamically added. You should try listening to the mouseover/mouseout event bubbling to the nearest static element (there is no .on('hover') for jQuery), or the document element:

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

edited May 23 '17 at 12:31

Community

1
1

answered May 01 '16 at 23:59

Terry

63,248
15
96
118

Perfect! With a slight adjustment `.on('mouseout', '.actions .fa-close', function() {` instead of `.on('mouseout', '.actions .fa-check', function() {` this works great! I knew I couldn't use `.on('hover')` but couldn't think of an alternative. Thanks! – Eckstein May 02 '16 at 00:05
Thanks! I'm glad it helped. I've changed the code to listen to mouseout event on `.fa-check` :) – Terry May 02 '16 at 00:14

Hover not working on js generated class/element

1 Answers1