Question

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>

Answer 1

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

As you’re adding the div to #wrapper dynamically, so you need delegate event handler. Using jQuery .on() you can bind click like above.

Syntax of .on() for delegate event is:

$( staticParent ).on( eventName, targetChild, handler);

Where, staticParent refers to container of target element(dynamic element) which is not dynamic.