.mouseenter() ne fonctionne pas sur le contenu chargé avec la fonction jQuerys .load()

Question

J'ai une page, avec une barre de navigation qui charge le contenu, d'une autre page, dans un div de contenu, quand un élément de navigation est cliqué.

Le contenu de l'autre page contient une variété de divs différents. L'un de ces divs a le style display: none. Cette div est au-dessus d'un autre div. Quand je .mouseenter() sur la div qui est en dessous de la div caché, j'ai besoin de la div cachée à .fadeIn().

.load() jQuery comme suit:

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

Le #workitem div contient les éléments suivants

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

Maintenant, quand je .mouseenter() sur la div .webImg, je veux la suivant à se produire:

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

Mais cela ne semble pas fonctionner. Est-ce parce que le contenu est chargé avec ajax? Y a-t-il un moyen d'accomplir cela avec jQuery?

Merci à l'avance

Answer 1

Dans votre cas, utilisez .delegate() pour les éléments ajoutés dynamiquement à #workcontent, comme celui-ci:

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

Dans d'autres cas, les .live() plus Ouvrages généraux:

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