修改

Question

我用AJAX加载页面。该页面包含以下代码（对于div'运动动画，＃1将其移至左侧，＃2将其再次移回）

#1 
$('#flipper').click(function () { 
      $(".l-l").animate({ "left": -267 }, 600, function () {
             $('#flipper').addClass('flipper-h'); 
       });
});

#2
$('#flipper.flipper-h').die(); //to prevent .live() event bubbling. I guess
$('#flipper.flipper-h').live('click', function () { 
    $(".l-l").animate({ "left": 0 }, 600, function () {
            $('#flipper').removeClass('flipper-h'); 
    });
});

使用该代码我遇到了一些问题：

1）首页加载后，代码＃2在动画开始前有一点冻结

2）在第二次（和更多）页面加载后，＃2代码不会触发。为什么？

修改

我注意到代码＃2被无限次调用（这很奇怪）。但是，我已经通过代码修复了1）案例：

$('#flipper').click(function () {
        if(!$(this).hasClass('flipper-h')) {
                $(".l-l").animate({ "left": -267 }, 600, function () {
                $('#flipper').addClass('flipper-h');
            }); 
        } else {
            $(".l-l").animate({ "left": 0 }, 600, function () {
                $('#flipper').removeClass('flipper-h');
             });
       }
});

但问题2）仍未解决。有什么想法吗？

Answer 1

EDIT3：请考虑以下两个代码：

http://jsfiddle.net/2zEZT/2/

http://jsfiddle.net/2zEZT/3/

在第一个示例中，当您使用“删除”按钮时，元素将被删除，其元素看起来相同，但它们不是。事件丢失了。

在第二个元素中，删除了元素，但在此之后再次绑定了click事件...

EDIT2 ：根据您的修改，尝试使用此功能。它表现得更好......

$('#flipper').click(function () {
    if ($(this).hasClass('flipper-h')) {
        $(this).removeClass('flipper-h');
        $(".l-l").animate({
            "left": 0
        }, 600);
    } else {
        $(this).addClass('flipper-h');
        $(".l-l").animate({
            "left": -267
        }, 600);
    }
});

编辑：我建议你仍然使用jQuery 1.7，所以我做了一些调查。

首先，您将事件onclick放在#flipper上。

然后你在＃flipper.flipper -h元素上调用die。哪个应该销毁所有直播活动。

之后，您在＃flipper.flipper -h元素上创建了一个实时事件，这意味着存在且将存在的所有元素都将具有此事件。

现在先点击：动画左：-267发生，然后回调#flipper成为#flipper.flipper-h，然后将直播事件绑定到新的＃flipper.flipper-h，

第二次点击：动画左：-267发生了，但它已经存在，所以没有任何反应然后回调#flipper成为＃flipper.flipper-h，所以没有再发生，现在事件还在冒泡，所以剩下的第二个动画：在600ms后触发0（这可能是你的冻结）现在回调删除.flipper-h

现在我不知道你的ajax究竟是如何工作的，但似乎die函数会永久地从#flipper中删除实时事件。所以它不能再被触发......

die功能不会阻止冒泡。它删除了直播活动。 return false或event.stopPropagation

jQuery动画和现场活动

修改

1 个答案: