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

Question

J'ai plusieurs éléments dl sur une page. À la fin de chacun d'eux, j'ai une balise dd qui fait office de liste déroulante et qui comprend des options pour l'élément (comme modifier, supprimer, etc.).

Voici le jQuery pour le dropdown :

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

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

Maintenant, avant les balises dl, j'ai une entrée et un bouton de soumission pour ajouter de nouvelles dl et j'utilise 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 faire pour 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 o .delegate :

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

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