Question

I have an unordered list with no list items.

I get some information from the user, I run it through my database using AJAX and the servers sends back a JSON object response.

Then I append each list item I want to display to the list using something like

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

My question is, since the li elements were not there at the time the DOM was ready, how can I bind a click event to them?

Here is my full code:

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

You use 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
   }