how to target a jquery created div with javascript
<p>i have a function that creates an album and with jquery's post function and then it create the necessary HTML elements and append them to the document.
the problem is that the elements are a link and its target, while the link woks fine when i refresh the page it seems like the browser couldn't found the added target which was created with jquery.
how could i target an element with javascript that was created with either jquery or javascript.
thanx in advance.
EDIT: </p>

<p><a href="http://jsfiddle.net/9tWu3/" rel="nofollow">the jsfiddle code</a></p>

<p>code:</p>

<pre><code>btn        = document.getElementById('add_album_btn');
btn.addEventListener('click', add_album_btn_func, false);
function add_album_btn_func(){
    div              = $('&lt;div&gt;').addClass('albums_div');
    a                = $('&lt;a&gt;').addClass('albums');
    a.attr('onclick', 'return false;');
    a.attr('onmousedown', 'autoScrollTo("new_section");').attr('href', '#');
    a.append('&amp;#9733; New Album');
    div.append(a);
    section          = $('&lt;section&gt;').attr('id', 'new_section');
    header           = $('&lt;header&gt;').addClass('inner_header');
    header.append($('&lt;h4&gt;').append('New Album'));
    inner_section    = $('&lt;section&gt;').append($('&lt;h5&gt;').append('Images List :'));
    footer           = $('&lt;footer&gt;').addClass('inner_footer');
    upload_btn       = $('&lt;a&gt;').attr('id', 'new_section').addClass('upload_file ajax');
    upload_btn.attr('href', 'some/link/');
    upload_btn.append('Upload a file');
    footer.append(upload_btn);
    section.append(header);
    header.after(inner_section);
    inner_section.after(footer);
    $('#wrap').append(div);
    $('#separator').after(section);
}
var scrollY          = 0;
var distance         = 40;
var speed            = 24;
function autoScrollTo(el){
    var currentY     = window.pageYOffset;
    var targetY      = document.getElementById(el).offsetTop;
    var bodyHeight   = document.body.offsetHeight;
    var yPos         = currentY + window.innerHeight;
    var animator     = setTimeout('autoScrollTo(\'' + el + '\')', speed);
    if(yPos &gt;= bodyHeight){
        clearTimeout(animator);
    }else{
        if(currentY &lt; targetY - distance){
            scrollY = currentY + distance;
            window.scroll(0, scrollY);
        }else{
            clearTimeout(animator);
        }
    }
}​
</code></pre>

<p>EDIT: 
apparently i wasn't clear enough what i want is the following:
i have this javascript code:</p>

<pre><code>$(document).ready(function(){
    $('.lightbox').click(function(){
        $('.backdrop').animate({'opacity': '.50'}, 300, 'linear');
        $('.box').animate({'opacity': '1.00'}, 300, 'linear');
        $('.backdrop, .box').css('display', 'block');
    });
    $('.close').click(function(){
        close_box();
    });
    $(".backdrop").click(function(){
        close_box();
    });
    function close_box(){
        $('.backdrop, .box').animate({'opacity': '.0'}, 300, 'linear', function(){
            $('.backdrop, .box').css('display', 'none');
        });
    }
    a = $('&lt;a&gt;').addClass('lightbox').attr('href', '#').append('&lt;br&gt;Click to Test.');
    $('body').append(a);
});
</code></pre>

<p>the html:</p>

<pre><code>&lt;h1&gt;jquery light-box&lt;/h1&gt;
&lt;a href=# class=lightbox&gt;open lightbox&lt;/a&gt;
&lt;div class="backdrop"&gt;&lt;/div&gt;
&lt;div class="box"&gt;&lt;div class="close"&gt;X&lt;/div&gt;this is the light box&lt;/div&gt;
</code></pre>

<p>the CSS:</p>

<pre><code>body{
    font-family: Helvetica, Arial;
}
.backdrop{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: .0;
    z-index: 50;
    display: none;
}
.box{
    position: absolute;
    top: 20%;
    left: 30%;
    width: 500px;
    height: 300px;
    background: #ffffff;
    z-index: 51;
    padding: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px #444444;
    display: none;
}
.close{
    float: right;
    margin-right: 6px;
    cursor: pointer;
}
</code></pre>

<p><a href="http://jsfiddle.net/9tWu3/" rel="nofollow">the jsfiddle link</a></p>

<p>the problem when the second link is added with javascript it seems to be llike its invisible to the function.
any help thanx in advance.</p>

<p>NOTE: this lightbox code is from the PHPacademy tutorials.</p>

<p>NOTE: if you'r going to give the answer about re_writing the function and re-assign it to the new created element i already know that i need another way.</p>

<p>thanx in advance.</p>
