Javascript 如何将jquery单击事件应用于动态列表元素？

我当前的设置加载了一个动态列表，在该列表中，我通过jquery创建了一个单击事件，如下所示：

$('#listReports li').click(function () {
    var selected = $(this).text();
    alert("List Item: " + selected);
});

我有一段代码，允许用户保存一份附加到列表中的报告。在我再次调用函数之前，列表中的新项不会触发click事件。问题是，对于较旧的项目，事件会触发两次

下面是我附加列表项并再次调用函数的方式：

            $("#save").click(function (e) {

                if ($("#reportParams li").size()> 0) {
                    var fileName = $('#reportFileName').val();

                    if (!fileName) {
                        alert("You must enter a file name!");
                    }
                    else {
                        $('#listReports').append('<li><a href="#">'+fileName+'</a></li>');

                        $('#listReports li').click(function () {
                            var selected = $(this).text();
                            alert("List Item: " + selected);
                        });
                    }
                }
            });

$（“#保存”）。单击（函数（e）{
如果（$（“#reportParams li”）.size（）>0）{
var fileName=$（'#reportFileName'）.val（）；
如果（！fileName）{
警报（“您必须输入文件名！”）；
}
否则{
$（“#listReports”）。追加（“
”）；
$（'#listReports li'）。单击（函数（）{
所选变量=$（this）.text（）；
警报（“列表项：+已选定”）；
});
}
}
});

是否有办法只定义一次单击事件，并使其影响附加到列表中的新项目？

而不是

。单击（）

，使用：

或：

---

太棒了！live和delegate之间有什么区别？一个比另一个好吗？在jQuery 1.7+中不推荐使用。改用

$('#listReports li').live('click', function ()
{
    var selected = $(this).text();
    alert("List Item: " + selected);
});

$('#listReports').delegate('li', 'click', function ()
{
    var selected = $(this).text();
    alert("List Item: " + selected);
});