Event handlers jQuery

Question

I have this code below:

$("button").click(function(){
    $("button").off('click');  //detach click for the button below
}

Then in the <body> tag I have this button below

<button>PLAY ANIMATION</button>

So the question is where can I place this code below?

$("button").bind('click'); // In other words I want to 
//reattach the click event that I just disabled at some later point

Take a step back... what's the end-game here? What are you trying to do? — Ayman Safadi, Oct 12 '12 at 03:40
I have a map animation and when a click event occurs on the button the animaaation plays. But while the animation is playing I do not want the user to click on the button. Only after the animation is done can they once again click the play button. — jim dif, Oct 12 '12 at 03:45
Reattach the event once the animation is complete then. "If supplied, the complete callback function is fired once the animation is complete", However, use `.on` instead of `bind` - "As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document." — Chase, Oct 12 '12 at 03:48
I am able to do a hide then a show which is pretty close to what I want. — jim dif, Oct 12 '12 at 03:49

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

Working demo http://jsfiddle.net/2NNGv/1/

Also you can do .is(":animated") check!

jQuery ajax, wait until beforeSend animation finishes

Hope it fits the cause :) and gives you idea!

Sample code

$("button").click(function() {

    $(this).prop('disabled', 'disabled');

    $('div').animate({
        marginLeft: "-200",
        marginTop: "-200",
        width: "400",
        height: "400"
        // Comment the line below to see difference
        ,
        opacity: 0.5
    }, 2000).animate({
        marginLeft: -150,
        marginTop: -150,
        width: 300,
        height: 300
        // Comment the line below to see difference
        ,
        opacity: 1
    }, 2000).show(function() {
        $("button").removeAttr('disabled');
    });

});

edited May 23 '17 at 12:12

Community

1
1

answered Oct 12 '12 at 03:58

Tats_innit

33,991
10
71
77

Tats this is awesome but I should have mentioned it is a Leaflet animation of a weather radar loop. – jim dif Oct 12 '12 at 04:15
This was a great example, however the only thing I could get to work was my second idea regarding hiding the button during the animation and then showing it again. – jim dif Oct 12 '12 at 04:19
@gdoron oh bruv! Welcome Back! How you doing? **GREAT** to see you, you are back, I am doing fine! `:)` now! Now you are around SO will be full of awesomeness `:)` how was your holidays? Have a pint on me today will return you the $ `:)` whenever we meet! – Tats_innit Oct 12 '12 at 04:28
@jimdif if you want to hide the button **Working Demo** here: http://jsfiddle.net/FEk2j/ this should fit your need! – Tats_innit Oct 12 '12 at 04:30
@Tats_innit. I'm still on a break has woke up at 4:30 AM... so... :) – gdoron Oct 12 '12 at 04:31
@gdoron heh! oh darn! `:)` you busted the excitment ballon around SO now `:P` Have a coffee on me then < my shout >! LOL – Tats_innit Oct 12 '12 at 04:33

RASG · Answer 2 · 2012-10-12T03:59:21.400

1

use .promise() to wait for the animation to finish, and attach the click event later.

see the example here: http://jsfiddle.net/RASG/gkveX/

Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

documentation here: http://api.jquery.com/promise/

edited Oct 12 '12 at 03:59

answered Oct 12 '12 at 03:54

RASG

5,988
4
26
47

score 0 · Answer 3 · answered Oct 12 '12 at 03:50

Have you tried bind and unbind?

$('#foo').bind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

// will NOT work
$('#foo').unbind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

Here is the source http://api.jquery.com/unbind/

You can bind the button then unbind it during the animation and then bind it again to enable the click event.

Event handlers jQuery

3 Answers3