Javascript 将事件绑定到AJAX填充的列表项

我有一个无序的列表，没有列表项

我从用户那里得到一些信息，使用AJAX在数据库中运行，服务器返回JSON对象响应

然后，我将要显示的每个列表项附加到列表中，方法如下

$('blabla').append('<li>information</li>')

$（'blabla'）。追加（'li>信息'））

我的问题是，既然DOM准备就绪时li元素不在那里，我如何将click事件绑定到它们

这是我的全部代码：

$(function(){
var timer;
$('#f').keyup(function(){
    clearTimeout(timer);
    timer = setTimeout(getSuggestions, 400);
    });
})

function getSuggestions(){
var a = $('#f')[0].value.length;
if( a < 3){
    if(a == 0){
        $('#ajaxerror').hide(300,function(){
            $('#loading').hide(300,function(){
                $('#suggest').hide(300)
                })
            })
        }
    return;
    }
$('#loading').slideDown(200,function(){
    $.ajax({
        url: '/models/AJAX/suggest.php',
        dataType: 'json',
        data: {'data' : $('#f')[0].value },
        success: function(response){
            $('#ajaxerror').hide(0,function(){
                $('#loading').hide(100,function(){
                    $('#suggest ul li').remove();
                    for(var b = 0; b < ( response.rows * 3); b = b + 3){
                        $('#suggest ul').append('<li>'+response[b]+' '+response[b+1]+' '+response[b+2]+'</li>')
                        // MISSING SOME CODE HERE TO BIND CLICK EVENT TO NEWLY CREATED LI
                        }
                    $('#suggest').show(300)
                    })
                })
            },
        error: function(){
            $('#suggest').hide(0,function(){
                $('#loading').slideUp(100,function(){
                    $('#ajaxerror').show(300)
                    })
                })
            }
        })
    })
}

$（函数（）{
无功定时器；
$（'#f'）.keyup（函数（）{
清除超时（计时器）；
定时器=设置超时（getSuggestions，400）；
});
})
函数getSuggestions（）{
var a=$（'#f'）[0].value.length；
if（a<3）{
如果（a==0）{
$（'#ajaxerror'）.hide（300，function（）{
$（'#加载'）.hide（300，函数（）{
$（“#建议”）.hide（300）
})
})
}
返回；
}
$（'#加载'）。向下滑动（200，函数（）{
$.ajax({
url:“/models/AJAX/suggest.php”，
数据类型：“json”，
数据：{'data'：$（'f'）[0].value}，
成功：功能（响应）{
$（'#ajaxerror'）。隐藏（0，函数（）{
$（“#加载”）.hide（100，function（）{
$（“#建议ul li”）.remove（）；
对于（var b=0；b<（response.rows*3）；b=b+3）{
$（“#建议ul”）。追加（“
”+响应[b]+“+response[b+1]+”+response[b+2]+”
）
//此处缺少一些将单击事件绑定到新创建的LI的代码
}
$（'建议'）.show（300）
})
})
},
错误：函数（）{
$（'#suggest'）。隐藏（0，函数（）{
$（“#加载”）.slideUp（100，函数（）{
$（'ajaxerror'）。显示（300）
})
})
}
})
})
}

您在（）上使用

for（变量b=0；b<（response.rows*3）；b=b+3）{
（职能（b）{
$（“#建议ul”）。追加（“
”+响应[b]+“+response[b+1]+”+response[b+2]+”
）；
$（'#建议ul li'）。在（'click'，function（）{
//你的职能`
});
})（b） ；//这是必需的，以便您的单击事件在变量b变为b+3之前能够正确访问它
}
谢谢您抽出时间。你能举个例子吗？是的，谢谢。关于//your函数部分的最后一件事。在这个函数中，当我试图提醒响应[b]时，它会提醒“未定义”。我怎样才能度过这一关？当有人单击新创建的li时，我试图更改一些其他元素。请尝试执行
console.log（response）
并查看chrome控制台，以查看服务器是否正确返回
response.b
。是的，响应正常返回，并按预期记录。这可能是一个与范围相关的问题吗？我可以提醒respose.rows。我无法提醒响应[b]。b是在for循环中定义的，它不应该对它里面的所有函数都可用吗？嗯，也许你的意思是
response.rows[b]
而不是
response.b
？
   for(var b = 0; b < ( response.rows * 3); b = b + 3){
      (function(b) {
         $('#suggest ul').append('<li>'+response[b]+' '+response[b+1]+' '+response[b+2]+'</li>');
         $('#suggest ul li').on('click', function() { 
            // your function`
         });
       })(b); // this is needed so that your click event has a proper access to variable b just before it changes to b+3
   }