Question

I have multiple dl elements on a page. At the end of each one I have a dd tag acting as a dropdown which includes options for the element (like edit, delete, etc.)

Here’s the jQuery for the dropdown:

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

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

Now before the dl tags I have an input and a submit button to add new dls and use jQuery to add them without reloading the page. The problem is that after the new element is added, the dd at the end doesn’t seem to work.

How can I make my previous code recognize that new elements have been added to the page?

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

Answer 1

Use .live or .delegate:

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

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