如何将jquery的Click事件应用于动态列表元素

Question

我当前的设置加载了一个动态列表，然后我通过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);
                        });
                    }
                }
            });

是否有一种方法来定义单击事件只有一次，并有它的影响新项目追加到列表?

Answer 1

用.live()代替.click():

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

或.delegate():

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