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

Question

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

我从用户那里得到了一些信息，我使用AJAX通过数据库运行它，服务器发回一个JSON对象响应。

然后我附上我想用的东西展示给列表像

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

我的问题是每个列表项，因为li元素都没有了当时的DOM准备好了，我该怎么绑定点击事件给他们？

这里是我的全码：

$(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) 
        }) 
       }) 
      } 
     }) 
    }) 
} 

Answer 1

您使用on()

http://api.jquery.com/on/

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 
    }