Question

我正在使用jQuery和使用Slim构建的api来创建移动应用程序。

我的总体目标是创建一个按钮列表，单击这些按钮时会调用具有相应参数的函数。

我成功地将我的请求发送到slim，获取用户列表并将结果存储在全局User对象数组中。

接下来，我正在遍历数组，将html附加到文档以显示按钮。同时我添加了一个点击监听器。听众被添加，但不像我期望的那样。

用户是具有全局范围的用户对象数组。用户对象可以归结为[{“name”：“用户名”}]。

同样可能是我在回电中这样做的事实。

$.getJSON(url, function(data){
    for(i=0;i<data.length;i++)
    {
         var u = new User();
         u.name = data[i]['name'];
    }
})
//The success handler DOES get called.
.success(function() {
    for(var i=0; i<users.length; i++)
    {
        //this part works.  users[i] is accessed as expected.
        var html_string = '<li>'+users[i].name+'</li>';

        $("#myUL").append(html_string);
        $("#myUL li:last").click(function(){
            //logs undefined
            console.log(users[i].name);

            //Handle the event
            eventHandleFunction()
        });
    }
})

我非常精通编程，一般都知道我正在做的事情并不属于最佳实践，但我在javascript中是如此的文盲，我不知道正确的解决方法。除了如何回答，我真的很感谢花了一些时间给我指出有用资源的人。

更新：在阅读有关使用委托分配处理程序的答案后，我已经更新了我的代码。现在看起来像这样。注意：我只是没有更新上面的代码，以便回答原始问题的“为什么”部分。

$("#myUL").delegate("li","click",function(){
            //sets the attribute name of the global var user
    user.name = $(this).text();
            //lets see what user.name is now.  Oh, look.  It's what i expect
    alert(user.name);
    //do whatever else i want to do here.
});

//This json request is now (i believe) entirely unnecessary to answer the question.
$.getJSON(url, function(data){
    for(i=0;i<data.length;i++)
    {
         var u = new User();
         u.name = data[i]['name'];
    }
})
//The success handler DOES get called.
.success(function() {
   //No longer relevant
})

Answer 1

您可以使用delegate

$("#myUL").delegate("li:last","click",function(){

//event handler code here
});

这样您就不必将Click事件处理程序显式附加到DOM中每个动态添加的li

如果您使用的是jquery版本1.7+，那么您可以使用{/ 3}}方法，如

$("#myUL").on("click","li:last",function(){

//event handler code here
});

部分原因

我看到的原因是范围

 for(var i=0; i<users.length; i++)
    {     

        var html_string = '<li>'+users[i].name+'</li>';

        $("#myUL").append(html_string);

        $("#myUL li:last").click(function(){
            //logs undefined BECAUSE i is undefined inside the click handler
            console.log(users[i].name);
            //Handle the event
            eventHandleFunction()
        });
    }

Answer 2

for(var i=0; i<users.length; i++) {
    var numb = i,
        html_string = '<li>'+users[numb].name+'</li>';

    $("#myUL").append(html_string);

    $("#myUL li:last").click(function(){
        console.log(users[numb].name);

        eventHandleFunction()
    });
}

基于数组的动态侦听器

2 个答案: