jquery with last-child after append
===

I seem to have a very basic problem which I cannot get my head around and I hope someone will be able to help me... 

I have a 'wrapper' div with three 'page' divs in it. When the rightmost div is clicked this one should become the middle one. I found a nice way to do this by first cloning the first child div and appending it at the end, then animating the 'wrapper' div left, then removing the original first child div and restore the 'wrapper' div's original position.

But the problem is that this only works on the first click in the original DOM; that is, it doesn't recognise the appended div as a new last-child.... can anyone help me out?

Jquery

    $(document).ready(function() {
                $('#wrapper div:last-child').click(function() {
                    $('#wrapper').animate({'left' : '-33%' }, 500, function() {
                        $('#wrapper div:first-child').clone(true).appendTo('#wrapper');
                        $('#wrapper div:first-child').remove();
                        $('#wrapper').css('left', '0');
                    });
                });
            });

HTML

    
        <div id="wrapper">
            <div class="page" id="p1">1st</div>
            <div class="page" id="p2">2nd</div>
            <div class="page" id="p3">3rd</div>
        </div>