Question

我遇到了.bind()和.unbind()功能的麻烦。单击按钮时，应该更改框的颜色。在此期间，通过取消绑定单击功能来禁用该按钮。但是，当css转换完成时，我遇到重新绑定点击的问题。

到目前为止我所拥有的是：

$('button').on('click', function(){
    $('button').unbind('click');

    $('.box').toggleClass('color');

    $('.box').one('webkitTransitionEnd transitionend', function(e){
        console.log('transition ended')
        $('button').bind('click')   
    });
});

http://jsfiddle.net/t6xEf/

Answer 1

绑定时需要传递click处理程序。因此，创建一个函数引用，然后在绑定处理程序时使用它。

function click() {
    $('button').off('click.transition');

    $('.box').toggleClass('color');   
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
    console.log('transition ended')
    $('button').on('click.transition', click)
});
$('button').on('click.transition', click);

演示：Fiddle

在注册/删除处理程序的同时查看namespaces的用法，因为如果有一些其他点击处理程序添加到按钮我们不想打扰它

另外，不要在另一个

中添加事件处理程序

另请查看.one()

function click() {
    $('.box').toggleClass('color');
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
    console.log('transition ended')
    $('button').one('click.transition', click)
});
$('button').one('click.transition', click);

演示：Fiddle

Answer 2

我会使用标志而不是绑定/重新绑定事件处理程序：

var animating = false;

$('button').on('click', function() { 
    if (animating) return;
    animating = true;

    $('.box').toggleClass('color')
             .on('webkitTransitionEnd transitionend', function(e) {
                 animating = false;       
             });
});

http://jsfiddle.net/t6xEf/1/

Answer 3

不要解开。使用布尔值：

var onTrans = false;
$('button').on('click', toggle);

function toggle() {
    if (!onTrans){
        $('.box').toggleClass('color');
        onTrans = true;
        $('.box').on('webkitTransitionEnd transitionend', function (e) {
            onTrans = false;
        });
    }
}

http://jsfiddle.net/jp8Vy/

Answer 4

这肯定不是你想要做的。它似乎过于复杂，我无法想象一个好的用例场景。

话虽如此，您需要重新附加要在最终绑定语句中执行的功能。您调用函数绑定到click事件，但不要告诉函数要附加什么。

你需要这样的东西： $（'button'）。bind（'click'，function（）{...}）;

然而，这可能不是你真正想要的。听起来你只想将按钮的“禁用”属性设置为false，然后将动画设置为true。

取消绑定并重新绑定单击css过渡结束

4 个答案: