Question

I’m loading some content via AJAX and trying to add some functionality,
I have this code to show/hide some content:

$('.list li').hover(
            function() { $('.detail').show(); }, 
            function() { $('.detail').hide(); }
        );

This works fine on first load, but when in load more content via AJAX not work.
Any Ideas how to fix it?

Answer 1

Using .on you can delegate the event to the .list element, so that adding new li elements will not break the intended functionality.

$(".list").on("mouseenter mouseleave", "li", function(e){
    $(".detail").toggle( e.type === "mouseenter" );
});

Fiddle: http://jsfiddle.net/NGEfj/

If the .detail element is within the li, and not on its own somewhere else in the page:

$(".list").on("mouseenter mouseleave", "li", function(e){
    $(".detail", this).toggle( e.type === "mouseenter" );
});

Fiddle: http://jsfiddle.net/NGEfj/1/