Question

Hi guys I have this code:

$('#riscButton, #eneButton, #giardButton').one("click", function(){
                $('.content').animate(
                    {"height":"+=620px"},
                    500,
                    'easeOutBounce');
                $('#eneButton').animate(
                    { "top":"+=310px"},
                    1500,
                    'easeInOutExpo');
                $('#eneButton').animate(
                    {"left":"-=310px"},
                    1500,
                    'easeOutBounce')
                $('#giardButton').animate(
                    {"top":"+=620px"},
                    2000,
                    'easeInOutExpo')
                });

As you can see if someone click on a button an animation has to happend, not important which button you click you have the same animation. with the one() I say to the button that has to be clicked one time only and here is the matter, how can i say to the script that if you press one button even the others must be disabled after?
right now for example if I click the first button the animation happend and ok, if I reclick the same button nothing happend, but if I click on the second or third button the animation starts again. how can I fix it?

Answer 1

You’ll have to unbind the event from all the elements, not just the one you clicked:

$('#a, #b, #c').click(function() {
    alert('clicked');

    $('#a, #b, #c').off('click');
});​

Demo: http://jsfiddle.net/peFff/3/

---

A better solution would be to use classes:

$('.clickable').click(function() {
    alert('clicked');

    $('.clickable').off('click');
});​

Demo: http://jsfiddle.net/peFff/5/