jQuery：单击并克隆错误

Question

单击链接，然后我想在克隆元素后执行动画。 但我却得到了意想不到的结果。要测试： http://jsfiddle.net/r4BVb/3/

在多个链接上单击（例如geek），克隆进行了很多次。

$('#clone').click(function(){
    $('.view_right').clone().prependTo('.overflowed');
    $('.view_right:last').css('display', 'none');
    $('.view_right:first').hide('slide', { direction: 'left' }, 300, function() {
        $('.view_right:last').show('slide', { direction: 'right' }, 300, function() {
           $('.view_right:first').remove();
        });
    });
});

我该如何解决这个问题？谢谢

Answer 1

这是解决方案：

var called = false;

$('#clone').click(function(){
    if (called) {
        return;
    }
    called = true;

    $('.view_right').clone().prependTo('.overflowed');
    $('.view_right:last').css('display', 'none');
    $('.view_right:first').hide('slide', { direction: 'left' }, 300, function() {
        $('.view_right:last').show('slide', { direction: 'right' }, 300, function() {
           $('.view_right:first').remove();

            called = false;

        });
    });
});

测试一下

Answer 2

您的代码将向 view_right 添加大量克隆，因此我建议检查您是否添加了太多这样的克隆：

if($('.view_right').length < 2) {

结果将是 http://jsfiddle.net/r4BVb/7/

Answer 3

看看这个： 使用 .one()

我有效地在动画后重新绑定点击，并且只听点击事件一次。