Reputation: 2701
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
Upvotes: 0
Views: 145
Reputation: 1039
Try to bind the event or use:
$('div.pheed-holder').live('hover',function(){});
Upvotes: 0
Reputation: 3931
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.
Upvotes: 1
Reputation: 7133
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
.
Upvotes: 0