悬停在 js 生成的类/元素上不起作用

Question

使用下面的脚本，我正在使用一些 ajax 添加和删除最喜欢的帖子，除了一个小细节外，一切都很顺利。如果我单击.save-audition 元素，部分行为是添加.fa-check 类（它覆盖了一个复选标记，表示帖子已保存）。

然后，当悬停时，复选标记（如脚本末尾所示）采用 .fa-close 类（将复选标记变为 X），以便用户可以单击并将帖子从他们的收藏夹中删除。

但是当复选标记类即时生成时，悬停效果不起作用，我不知道如何修复它。

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');
    });

})

对应的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>

Answer 1

那是因为在动态添加元素之前就绑定了悬停事件监听器。你应该试着听一下 mouseover/mouseout 事件冒泡到最近的静态元素（there is no .on('hover') for jQuery），或者文档元素：

$(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');
});