La liste déroulante ne fonctionne pas sur les éléments nouvellement ajoutés

Question

J'ai plusieurs éléments dl sur une page. A la fin de chacun, j'ai une étiquette dd agissant comme un menu déroulant qui comprend des options pour l'élément (comme modifier, supprimer, etc.)

Voici le jQuery pour le menu déroulant:

$('dd.optiuni').mouseover(function() { 
    $(this).find('ul').show(); 
}); 

$('dd.optiuni').mouseout(function() { 
    $('dd.optiuni ul').hide(); 
}); 

Maintenant, avant les tags dl J'ai une entrée et un bouton submit pour ajouter de nouveaux dls et utiliser jQuery pour les ajouter sans recharger la page. Le problème est qu'après l'ajout du nouvel élément, le dd à la fin ne semble pas fonctionner.

Comment puis-je faire en sorte que mon code précédent reconnaisse que de nouveaux éléments ont été ajoutés à la page?

$(function() { // ie7 z-index fix 
    var zIndexNumber = 1000; 
    $('dl').each(function() { 
     $(this).css('zIndex', zIndexNumber); 
     zIndexNumber -= 10; 
    }); 
}); 

Answer 1

Utilisez .live ou .delegate:

$('dd.optiuni').live("mouseover", function() { 
    $(this).find('ul').show(); 
}); 

$('dd.optiuni').live("mouseout", function() { 
    $('dd.optiuni ul').hide(); 
});