悬停事件不工作

Question

当鼠标悬停在div上时，我试图显示一个删除图标，但在这里鼠标悬停事件永远不起作用。我的代码这个函数显示带有数据的div

function load_pheeds()
    {
        var request_url = url+'pheeds/latest_pheeds';
        var timeline = $('#pheed-timeline');
        var loading = '<div class="progress-indicator">Loading Pheeds....</div>';
        timeline.append(loading);
        $.ajax({
            url:request_url,
            type:'GET',
            dataType:'json',
            error:function() { },
            success:function(data)
            {
                if(data.message == null)
                {
                    $('.progress-indicator').fadeOut('slow',function() {
                        $.each(data,function(index,pheed)
                        {
                            var del = '';
                            if(pheed.owner == "yes")
                            {
                                del = '<a href="#" class="deletePheed" style="display:none;">Delete Pheed</a>';
                            }
                            timeline.append(
                              '<div class="pheed-holder" data-id="'+pheed.pheed_id+'" data-delete="'+pheed.owner+'">'+
                              '<div class="user-profile-avatar"><img src="'+pheed.avatar_src+'" /></div>'+
                              '<div class="useridentity" data-userid="'+pheed.user_id+'">'+
                              '<a href="'+url+'users/info/'+pheed.username+'">'+pheed.username+'</a>'+
                              '</div>'+del+
                              '<div class="pheedContent">'+pheed.pheed+'</div>'+
                              '<div class="pheedMeta">'+
                              '<span class="timefield t:'+pheed.datetime+'000"></span>'+
                              '<span class="comment-count">'+pheed.comment_count+'</span>'+
                              '</div>'+
                              '</div>'
                            );
                        });
                    });
                }
            }
        });
    }

这是事件处理程序

  $('div.pheed-holder').hover(function() {
            $(this).children('.deletePheed').show();
            },function() {
                $(this).children('.deletePheed').hide();
            });

悬停事件永远不起作用

Answer 1

我认为您的悬停处理程序是在元素被附加之前设置的？如果div.pheed-holder在执行时不存在，则jQuery无法添加处理程序。

尝试在ajax响应之后执行.hover(..., ...)；改用live()。

Answer 2

如果事件的DOM对象像这样是动态的，那么您需要使用live (或1.7中的on )而不是bind。

$('div.pheed-holder').live("hover", function() {

您可能必须使用live分别绑定到mouseenter和mouseleave，而不是使用hover。

Answer 3

尝试绑定事件或使用：

$('div.pheed-holder').live('hover',function(){});