jquery:binding a hover event with ajax loaded content

Question

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

Answer 1

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

Answer 2

Thanks alot redsquare, that worked just fine!

Answer 3

Hello, I have a similar problem and I believe that you can help me. I tried to do what you suggest in this post but I'm not doing it right obviously.

I am using this tutorial's script: http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

I have a menu that loads content through ajax in a div. What I'm trying to achieve is to make some links, inside the loaded content, behave like the menu and load content. Actually I want to add a "back to Home" link in each section loaded via ajax and make this link load the home section.

I have tried to add an event about this link with no success.

var content = $("#content");        
var back1 = $("#back1");

    back1.click(function(){
     showLoading();
     content.slideUp();
     content.load("sections.html #section_home", hideLoading);
     content.slideDown();
    });

This code is inside document ready. How I am supposed to use the ajax success in this case? Can you help me a little please?