CODEWITHSUNDEEP
javascriptjquery
cat-t
cat-t

Reputation: 1376

Unbind and rebind click on css transition end

I'm having troubles with the .bind() and .unbind() features. When the button is clicked, it's supposed to change the color of the box. During this time, the button is disabled by unbinding the click function. However, I'm having issues rebinding the click when the css transition completes.

What I have so far is:

$('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/

Upvotes: 0

Views: 740

Answers (4)

sul4bh
sul4bh

Reputation: 636

Do not unbind. Use a boolean:

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/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388416

You need to pass the click handler when binding it. So create a function reference then use it while binding the handler.

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);

Demo: Fiddle

Also look at the usage of namespaces while registering/removing the handler because if there if some other click handler added to the button we don't want to disturb it

Also do not add a event handler inside another one

Also have a look at .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);

Demo: Fiddle

Upvotes: 1

Nostalg.io
Nostalg.io

Reputation: 3752

This is surely not what you want to do. It seems overly complex, and I can't imagine a good use case scenario.

That being said, you need to reattach the functionality to be performed in the final bind statement. You call the function to bind to the click event, but don't tell the function what to attach.

You need something like this: $('button').bind('click', function() { ... });

However, that probably isn't what you really want. It sounds like you just want to set the button's "disabled" attribute to false, then to true after the animation.

Upvotes: 0

Ram
Ram

Reputation: 144719

I would use a flag instead of binding/rebinding the event handler:

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/

Upvotes: 1

Related Questions