jquery .load() slows down after multiple loads
<p>I wrote this fairly simple lightbox type function in jquery:</p>

<pre><code>//LIGHTBOX FUNCTION
$(document).ready(function() {
    $('.litebox').click(function(event) {

        if ($('.lightbox_bg').length &gt; 0) {

            $('.lightbox_content').empty();
            $('.lightbox_bg').empty();


            var link = $(this).attr('href');

            $('.lightbox_bg').fadeIn('slow');
            $('.lightbox_content').fadeIn('slow');

            $('.lightbox_content').load(link);
            event.preventDefault();

        } else {

            $("body").append("&lt;div class='lightbox_bg'&gt;&lt;/div&gt;");
            $("body").append("&lt;div class='lightbox_content'&gt;&lt;/div&gt;");

            var link = $(this).attr('href');

            $('.lightbox_bg').fadeIn('slow');
            $('.lightbox_content').fadeIn('slow');

            $('.lightbox_content').load(link);
            event.preventDefault();

        }

    });

    $("a#close-panel").click(function() {

        $('.lightbox_content').fadeOut(300).empty();
        $('.lightbox_bg').fadeOut(300).empty();

    });

});
</code></pre>

<p>I added the .empty to try and empty the data of the div but if you open a link after the 4th time it slows way down and after the 6th or 7th time its almost crashing the browser.
I'm very new to this. How do I get rid of the old data or the div entirely so that it won't slow down. And I don't want to refresh the browser page. If I refresh it fixes the problem but  there must be a more elegant solution.</p>

<p>Any help would be appreciated.</p>

<p>thank you!</p>

<p>Craig</p>

<p>EDIT:</p>

<p>Ok so I simplified the code a little and added some Alerts to see what was happening. This is the new code.</p>

<pre><code>//Lightbox Function

$(document).ready(function(){

 $('.litebox_edit').click(function(event){

    var link = $(this).attr('href');

    if($('.lightbox_bg').length == 0){

        alert('No box'); 

        $("body").append("&lt;div class='lightbox_bg'&gt;&lt;/div&gt;");
        $("body").append("&lt;div class='lightbox_content'&gt;&lt;/div&gt;"); 

    }

        alert('box exists');

        $('div.lightbox_bg').fadeIn(300); 
        $('div.lightbox_content').fadeIn(300).load(link);


 event.preventDefault();

});



 $("a#close-panel").click(function(){ 

    $('div.lightbox_content').fadeOut(300);
    $('div.lightbox_bg').fadeOut(300);


}); 
});
</code></pre>

<p>So what happens is the first time you click on a link it says alert "no box" you click ok then it says alert "box exists" then It shows the lightbox.</p>

<p>Then you close the box. Now when you click the link again it says Box exists then you click ok and it then says "box exists" AGAIN and then shows the box.</p>

<p>Then the third time you click the link it will say "box exists" 3 or 4 times and that will keep increasing every time you close the box and reclick the link.</p>

<p>Changing the tags from .lightbox_bg to #lightbox_bg makes no difference .</p>

<p>Any ideas? I must be creating a loop somehow. But I don't know how.</p>

<p>Thank you.</p>

<p>Craig</p>
