1

我似乎有一个非常基本的问题，我无法解决，我希望有人能够帮助我......

我有一个 'wrapper' div，其中包含三个 'page' div。当点击最右边的 div 时，这个应该变成中间的。我找到了一个很好的方法，首先克隆第一个子 div 并将其附加到末尾，然后将“包装器”div 向左设置动画，然后删除原始的第一个子 div 并恢复“包装器”div 的原始位置。

但问题是这只适用于原始 DOM 中的第一次点击；也就是说，它不会将附加的 div 识别为新的最后一个孩子....任何人都可以帮助我吗？

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>
4

1 回答 1

2 
$('#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');
    });
});

当您动态添加divto#wrapper时，您需要委托事件处理程序。使用 jQuery你可以像上面那样.on()绑定。click

委托事件的语法.on()是：

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

其中，staticParent指非动态的目标元素（动态元素）的容器。

于 2012-07-18T19:14:33.777 回答