.mouseenter（）对装载了jQuerys .load（）函数的内容不起作用

Question

当单击导航项目时，我有一个页面，导航栏将内容从另一个页面加载到content-div中。

来自其他页面的内容包含各种不同的div。其中一个div的风格是display: none。这个div是另一个div的顶部。当我在隐藏div下的div上使用.mouseenter（）时，我需要将隐藏的div分配给.fadeIn（）。

.load（）的jQuery如下：

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

股利#workitem包含以下元素

<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/xxxxx_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/xxxxx_print_199_101.jpg" alt="" /> 
</div> 
<div class="projBeskrivelse"> 
     <p class='header'>xxxxx</p> 
     <p class='brodtekst'>This project is developed for the danish waiter rental company, xxxxx. The assigment included a redesign of their logo, their website and a general makeover of the visual identity. The project was made because xxxxx was expanding with a catering subdivision.</p> 
</div> 
</div> 

现在，当我.mouseenter（）在.webImg格，我想以下发生：

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

但它似乎没有工作。这是因为内容是用ajax加载的吗？有什么办法可以用jQuery来完成这个任务吗？

在此先感谢

Answer 1

在你的情况使用.delegate()动态添加到#workcontent元素，像这样：

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

在其他情况下，更一般的.live()作品：

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