Bind event to AJAX populated list items
<p>I have an unordered list with no list items.</p>

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

<p>Then I append each list item I want to display to the list using something like</p>

<pre><code>$('blabla').append('&lt;li&gt;information&lt;/li&gt;')
</code></pre>

<p>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?</p>

<p>Here is my full code:</p>

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

function getSuggestions(){
var a = $('#f')[0].value.length;
if( a &lt; 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 &lt; ( response.rows * 3); b = b + 3){
                        $('#suggest ul').append('&lt;li&gt;'+response[b]+' '+response[b+1]+' '+response[b+2]+'&lt;/li&gt;')
                        // 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)
                    })
                })
            }
        })
    })
}
</code></pre>
