javascript - 怎么为通过函数添加的a元素添加点击函数并获取它的值？

Question

使用jquery读取json文件并往列表中添加之后需求在列表中点击每个文件可以获得它的值。
json:

{
    people : 
    [
        { name : "zhangsan" }
        { name : "lisi")
    ]
}

jquery代码：

$.getJSON('file.json', function(data) {
    var people = data.people;
    for (i=0; i<people.length; i++) {
        var li = "<li><a href='#' class=''people'>" + people[i].name + "</a></li>";
        $('ul#people').append(li);
    }

目前已经成功添加了列表，但是如果将方法设置如下：

$('a.people').click(function() {
    alert($(this).attr('value');
}

弹出的并会是undefined（我在原代码中设置过了value=people[i].name)，其他的尝试包括val, text弹出的会是一段不明所以的jquery库的原码。

但是我希望获取的就是它所对应的people[i].name，并且只希望通过a元素而不是其他的像按钮之类的元素获得这个值，应该怎么实现？

Answer 1

像这种动态添加的结构建议使用事件代理，可以在ul上代理

$('#people').on('click','.people',function(){
    alert($(this).text());//not attr('value');
});

补充

for (var i=0; i<people.length; i++) {
    var li = "<li><a href='#' class=''people'>" + people[i].name + "</a></li>";
    $('ul#people').append(li);
}

这种写法太耗性能了，改下

var content='';
for (var i=0; i<people.length; i++) {
    content + = "<li><a href='#' class='people'>" + people[i].name + "</a></li>";        
}
$('#people').append(content);

Answer 2

用live来绑定事件