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事件冒泡到最近的静态元素（jQuery的there is no .on('hover')）或文档元素：

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

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

1 个答案: