Hover event not working

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

It works fine for me. Perhaps you are experiencing a JavaScript error somewhere along the line? Have you checked to make sure the anchor is actually being inserted into the HTML? — animuson
– animuson ♦, Commented Nov 10, 2011 at 19:55

Smamatti · Accepted Answer · 2011-11-10 19:56:23Z

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.

answered Nov 10, 2011 at 19:56

Smamatti

3,9313 gold badges34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BNL · Accepted Answer · 2011-11-10 19:54:24Z

0

If the event's DOM object is dynamic like this, you need to use live (or on in 1.7) instead of bind.

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

You may have to bind with live to mouseenter and mouseleave individually instead of using hover.

answered Nov 10, 2011 at 19:54

BNL

7,1214 gold badges30 silver badges32 bronze badges

Comments

Mat · Accepted Answer · 2011-11-11 07:49:45Z

0

Try to bind the event or use:

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

edited Nov 11, 2011 at 7:49

Mat

208k41 gold badges407 silver badges423 bronze badges

answered Nov 10, 2011 at 19:55

tmjam

1,0392 gold badges12 silver badges25 bronze badges

1 Comment

tmjam Over a year ago

live is depricated in 1.7 u can use on() instead

Collectives™ on Stack Overflow

Hover event not working

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related