13

我有一个锚标签<a class="next">next</a>做成一个“按钮”。有时，如果没有新内容可显示，则需要隐藏此标签。如果我只是用 .hide() 隐藏按钮并用 .show() 重新显示它，那么一切都很好。但我想改用 .fadeIn() 和 .fadeOut() 。

我遇到的问题是，如果用户在淡出动画期间单击按钮，可能会导致我运行节目的逻辑出现问题。我找到的解决方法是在原来的点击功能开始后从按钮上解绑点击事件，等动画完成后再重新绑定。 

$('a.next').click(function() {
    $(this).unbind('click');
    ...
    // calls some functions, one of which fades out the a.next if needed
    ...
   $(this).bind('click');
}

上述示例的最后一部分不起作用。点击事件实际上并没有重新绑定到锚点。有谁知道正确的方法来做到这一点？

我是一个自学 jquery 的人，所以一些更高层次的东西，比如 unbind() 和 bind() 都在我的脑海中，而且 jquery 文档对我来说还不够简单理解。

4

3 回答 3

15

我只想添加一个检查以查看它是否首先制作动画：

$('a.next').click(function() {
    if (!$(this).is(":animated")) {
        // do stuff
    }
});
于 2010-04-07T14:21:46.453 回答
6

当您重新绑定点击事件时，您将重新开始。您需要提供您打算处理事件的函数。在您调用“unbind”之后，jQuery 不会为您记住它们。

在这种特殊情况下，它有点复杂。问题在于，当您启动这些动画时，您会启动一系列由计时器驱动的动作。因此，在单击处理程序本身中取消绑定和重新绑定“单击”处理程序实际上无济于事。有什么帮助（假设您不想用这个is(":animated")技巧解决问题）将取消绑定处理程序，然后在动画的“完成”回调中重新绑定。

当您首先设置“click”处理程序时，您可以将函数的声明与对“click()”的调用分开：

var handler = function() {
  $(this).whatever();
};
$('a.next').click(handler);

然后，如果您最终想要取消绑定/重新绑定，您可以重复该调用以“单击”并以相同的方式引用“处理程序”函数。

于 2010-04-07T14:53:56.523 回答
3

一个更简单和简短的解决方案

（不使用绑定/解除绑定方法）

如果要取消绑定，则向对象添加一个类，然后删除该类以重新绑定ex；

$('#button').click( function(){
   if($(this).hasClass('unbinded')) return;
   //Do somthing
 });

$('#toggle').click(function(){
    $('#button').toggleClass('unbinded');
 });
于 2016-01-07T22:07:37.920 回答