CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
Norbert
Norbert

Reputation: 2771

Dropdown doesn't work on newly added elements

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

Upvotes: 2

Views: 82

Answers (1)

karim79
karim79

Reputation: 342635

Use .live or .delegate:

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

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

Upvotes: 2

Related Questions