将数据集合的引用传递给单击处理程序的回调函数

Question

以下是我的代码目前的结构：

$.post('includes/getPeople.php', {char: character}, function(data) {
 var peopleData = data.people;

 //generation of HTML markup...

 $("#peopleTable a.nameLink").live("click", function(e) {
 var index = $(this).attr("title");
 console.log(peopleData[index].Email);
 alert(peopleData[index].Email);
 e.preventDefault();
    });
}

每当我点击链接（这是数据库中人员的名字）时，我都会收到此错误：“peopleData未定义”。有没有办法解决这个问题？

谢谢。

Answer 1

在该上下文中使用.live()不正确，这很可能是您遇到此错误的原因。您应该使用.bind()代替。

• Live
• Bind

如果您查看其说明，您会注意到live是bind的扩展形式，每次添加与live中的选择器匹配的新HTML元素时，事件处理程序将自动被“绑定”。

在您的情况下，每次进行AJAX调用时，您都在调用.live()函数，这会导致每次创建HTML标记时都会向链接添加新的处理程序。

希望它有意义，尽力解释。

修改

查看代码，看来peopleData现在已脱离上下文，因此它不存在。变量在post回调函数内创建，而click事件处理程序在函数外部。

尝试以下方法：

$(function() {
    var letters = $("ul#peopleLetters li");
    var current = $("ul#peopleLetters li.selected");
    var d = '';
    retrievePeople('#');
    letters.click(function() {
        d = $(this).attr("title");
        current.removeClass("selected");
        current = $(this);
        $(this).addClass("selected");
        retrievePeople(d);
    });

    function retrievePeople(character) {
        $.post('includes/getPeople.php', {char: character}, function(data) {
            var peopleData = data.people;
            var count = data.count;
            var markup = '';
            var countDetails = '';
            countDetails = (character == '#') ? count + " Listings Were Found." : count + " Listing(s) Beginning With The Letter '" + character + "'";
            if(count == 0){ markup = "No results were found.";}
            else {
                //markup stuff [although, a note here, instead of using data.people, you can, and should use peopleData]
            }

            $("#peopleTable a.nameLink").bind("click", {data: peopleData}, function(e) {
                var index = $(this).attr("title");
                console.log(data[index].Email);
                alert(data[index].Email);
                e.preventDefault();
            });

        $("#allPeople").html(markup);   
        }, "json");
    }
});