jquery:binding a hover event with ajax loaded content

hover, jquery

Solution

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

Problem

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

Original source