Question

Am trying to display a delete icon when the mouse hovers over a div, but the hover event never works
Here my code
This function displays the divs with data

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

This is event handler

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

The hover event never works

Answer 1

I think your hover handlers get set before the element is appended?
jQuery cannot add the handler if the div.pheed-holder doesn’t exists on execution.

Try executing .hover(..., ...) after your ajax response; use live() instead.