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