javascript - 下拉菜单不适用于新添加的元素

Question

我在一个页面上有多个 dl 元素。在每一个的末尾，我都有一个 dd 标签作为下拉列表，其中包括元素的选项(如编辑、删除等)

这是下拉列表的 jQuery:

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

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

现在，在 dl 标签之前，我有一个输入和一个提交按钮来添加新的 dls，并使用 jQuery 添加它们而无需重新加载页面。问题是添加新元素后，最后的dd好像不起作用。

如何让我以前的代码识别新元素已添加到页面？

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

Answer 1

使用.live或 .delegate :

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

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