4

First of all I DO realize that there are many similar questions like this one, but I just cannot understand the answer or the jsfiddle answer does not work!

My question is quick and simple, I have a div, which on click moves a second div to the right. But I want the div to be unclickable while the animation is performed. Here is my code:

$("#go").click(function() {
    $("#go").off()
   functionlist["flip"]()
    $("#go").on()
})​

But the div never becomes clickable. Am I just really misunderstanding the language? Thanks so much!

http://jsfiddle.net/g5mJd/12/

EDIT: I would like to avoid making the element unclickable while animated as I want to execute other functions as well when clicking on run and still disable it during the process. I only used the animation as an example.

curious-cat
  • 421
  • 1
  • 7
  • 17
  • It looks like your click event is on the button and not the div. Were you intending to have the div move when IT was being clicked, or does your question assume the button is being clicked? – Benjamin Powers Dec 01 '12 at 05:18
  • This might help http://stackoverflow.com/questions/260745/using-jquery-how-do-i-disable-the-click-effect-on-the-current-tab – Benjamin Powers Dec 01 '12 at 05:20
  • I was intending for one div to be animated when the second div is clicked. I'll rephrase the question to clarify! – curious-cat Dec 01 '12 at 05:23
  • I don't understand your question... why are you trying to put the div unclickable? Because if you press the `Run` button then how can I click the div while animation executes? – Oscar Jara Dec 01 '12 at 05:24
  • I desire run to be unclickable while the Hello text is performing its animation (this does not need to be an animation, it could be any function). @Bejamin Powers: Thanks! However I would like this to work for non-animations as well! (button click off, function, button click on) – curious-cat Dec 01 '12 at 05:28

3 Answers3

2

I think you slightly misunderstand what on() and off() are doing. on() doesn't restore the click handler which off() removed, it attaches a new one. You have to provide it a handler to attach.

Instead of using on() and off(), use the solution from this question: Make an element unclickable while animated

Community
  • 1
  • 1
FoolishSeth
  • 3,953
  • 2
  • 19
  • 28
  • Thanks for the answer! I updated my questions to clarify why I do not want to use is `(:animated)`. So is there a way to disable the click handler temporarily instead of permanently? – curious-cat Dec 01 '12 at 05:36
2

This was an interesting one. What threw me off was that you couldn't evaluate :animated because you are using the method transition. I've added the following to your click handler as well as provided a fork here: 

var functionlist = {
    flip: function() {
        $("#block").transition({
            x: '+=100'
        }, 500, function(){$("#block").attr('data-animating', "false");});
    },
    flop: function() {
        $("#block").transition({
            rotateY: '0deg'
        }, 500)

    }
};


$("#go").click(function() {
    if ($("#block").attr('data-animating') !== "true") {
        console.log($("#block").attr('data-animating'));
        $("#block").attr('data-animating', "true");
        functionlist["flip"]();
    }
});​
Benjamin Powers
  • 3,186
  • 2
  • 18
  • 23
0

This is not the correct usage of JQuery on/off methods. Please go through the documentation again.

You are supposed to pass a event name and a handler function to the on method.

$("#id").on("click", function() {});

and

$("#id").off("click");

BuddhiP
  • 6,231
  • 5
  • 36
  • 56