下拉列表不适用于新添加的元素

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