.mouseenter() doesn't work on content loaded with jQuerys .load() function

Question

Hi!

I have a page, with a navigationbar that loads content, from another page, into a content-div, when a navigation item is clicked.

The content from the other page contains a variety of different divs. One of these divs has the style display: none. This div is on top of another div. When I .mouseenter() on the div that is below the hidden div, I need the hidden div to .fadeIn().

.load() jQuery as follows:

var workitem;
// When the navigationitem is clicked
$("ul.worklist li", this).click(function() {

// Get the id-attribute, to decide what div to load          
      workitem = $(this).attr("id");

// Declare a variable that describes the contents location
      var getitem = "work.aspx #" + workitem;
// Load the content with the .load function, and add some cool fadeIn effects
      $("#workcontent").load(getitem, function() {
            $(".webImg:hidden").delay(1000).fadeIn(200, function() {
                $(".logoImg:hidden").fadeIn(200, function() {
                    $(".printImg:hidden").fadeIn(200, function() {
                        $(".projBeskrivelse:hidden").fadeIn(800);
                    });
                });
            });
        });
// Do stuff to the navigation panel
        $(this).stop().animate({ color: '#000' }, 100);
        $(this).siblings("li").animate({ 'line-height': '24px', color: '#ddd' }, 300);
    });

The div #workitem contains the following elements

<div class="webImg">
    <div class="webImgOverlay"><p>Go to website ►</p></div> <!-- This is the element that has the display: hidden attribute in it's class -->
    <img src="work/lejentjener_web_550_451.jpg" alt="" />
</div>
<div class="logoImg">
    <img src="work/let_logo_199_325.jpg" alt="" />
</div>
<div class="printImg">
    <img src="work/lejentjener_print_199_101.jpg" alt="" />
</div>
<div class="projBeskrivelse">
        <p class='header'>Lej En Tjener</p>
        <p class='brodtekst'>This project is developed for the danish waiter rental company, Lej En Tjener. The assigment included a redesign of their logo, their website and a general makeover of the visual identity. The project was made because Lej En Tjener was expanding with a catering subdivision.</p>
</div>
</div>

Now when I .mouseenter() on the .webImg div, I want the following to happen:

$(".workitem", this).mouseenter(function() {
    $(".webImgOverlay").fadeIn(200);
});
$(".workitem", this).mouseleave(function() {
    $(".webImgOverlay").fadeOut(200);
});

But it doesn't seem to work. Is this because the content is loaded with ajax? Is there any way to accomplish this with jQuery?

Thanks in advance

Answer 1

In your case use .delegate() for elements dynamically added to #workcontent, like this:

$("#workcontent").delegate('.workitem', 'mouseenter', function() {
    $(".webImgOverlay").fadeIn(200);
}).delegate('.workitem', 'mouseleave', function() {
    $(".webImgOverlay").fadeOut(200);
});

In other cases, the more general .live() works:

$(".workitem").live('mouseenter', function() {
    $(".webImgOverlay").fadeIn(200);
}).live('mouseleave', function() {
    $(".webImgOverlay").fadeOut(200);
});