Lightbox doesn't work on Append
<p>I've encountered a problem here.
After I scroll down and more pictures are append to the previous html, lightbox doesn't work. It works for the first few pictures that are loaded when users enter the site but not those which are append-ed.
I read "<a href="http://stackoverflow.com/questions/7652726/lightbox-not-working-on-ajax-load-parts">Lightbox Not Working on AJAX Load Parts</a>" and it said to use live() function. I've tried adding it in many places in the script but it doesn't work. Help guys?</p>

<pre><code>    &lt;script type="text/javascript"&gt; 
$(function() { 
$('#searchResults a').lightBox(); 
}); 
&lt;/script&gt;

    &lt;script&gt;
    var loadMore = true;
    var page = 1;
    var loading = false;
    $(window).scroll(function(){
    //$(window).live('scroll', function(){
       // if  ($(window).scrollTop() == ($(document).height() - $(window).height()) &amp;&amp; loadMore &amp;&amp; !loading){
       if  ($(window).scrollTop() &gt; (($(document).height() - $(window).height())-100) &amp;&amp; loadMore &amp;&amp; !loading){
            loading = true;
            page+=1;
           $('#searchResults').append('&lt;hr&gt;&lt;div id="page' + page + '" class="content"&gt;&lt;/div&gt;');
            cloudLoad('more.php?page=' + page, 'page' + page);
        }
    });
    &lt;/script&gt;



    function cloudLoad(url, id) {
        if(id === undefined) {
           $.post(url);
        } else {
            if(document.getElementById(id) !== undefined) {
                $.getJSON(url, function(data) {
                    $.each(data, function(key, val) {
                        $('#'+id).html(val);
                    });
                });
                console.log(url);
            }
        }
    }
</code></pre>

<p>Thanks(:</p>
