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

div #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>

现在，当我在 .webImg div 上执行 .mouseenter() 时，我希望发生以下情况：

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