CODEWITHSUNDEEP
jqueryhover
Nokka
Nokka

Reputation:

jquery:binding a hover event with ajax loaded content

I'm using jQuery to try and bind some newly loaded <li> elements with .hover() and I'm kind of stuck. At the moment I'm reloading the content in a <ul> with ajax and there's a hover event with .hover(); on the <li>. The hover event works perfectly on the non-ajax-loaded content of course.

I know I can use mouseover/mouseout to bind the event with .live(); which is a good solution if it weren't for mouseover/mouseout bad habit to break the event if you hover a child element of the current element the mouseover is bound to. So the reason I'm using .hover(); is because I can freely hover the children of my hover-bound element without the event being cancelled.

bind(); doesn't seem to work at all either, so my question is.. Is there any use in trying to get ajax loaded <li> events bound and keep the hover effect as a hover();, or should I just roll over and use mouseover/mouseout with live(); and try and solve the hover children problem some other how?

Success Message:

success: function(data){ 
           $('ul#list').bind().append("<li>test test</li>");
         }

Upvotes: 9

Views: 8439

Answers (1)

redsquare
redsquare

Reputation: 78667

bind works like this. e.g

$('#list').bind('mouseover', function(){})

However I think what you need to do is just call the same function that you use to bind the event when the document first loads. If this is inside a document ready block then extract it into a function and just call the same function in doc ready and in the ajax success event.

e.g

$(document).ready( function(){

   bindHover( $('#list>li') )

   $.ajax({ success: function(data){
                         bindHover( data.find('li') );
                     },
            url: bla
   });

})

function bindHover($liList){
  $liList.hover( fn, fn )
}

Upvotes: 8

Related Questions