Prevent 'click' event from firing multiple times + issue with fading

Question

Morning folks. Have an issue with a simple jQuery gallery i'm making. It lets the user cycle through a collection of images via some buttons and at the same time, rotates through these images on a timer. My problem is that the user is able to click the button multiple times which queues up the fade in animation and repeats it over and over, e.g. user clicks button 5 times > same image fades in/out 5 times > gallery moves to next image. I've tried using: `$('#homeGalleryImage li a').unbind('click');` After the click event is fired and then rebinding: `$('#homeGalleryImage li a').bind('click');` After it's done but this simply removes the click event after pressing a button once and never rebinds to it? I've also tried disabling the button via: `$('#homeGalleryImage li a').attr('disabled', true);` To no avail... ? There is a secondary issue where if you manage to click a button while the image is in a transition, the next image appears 'faded' as if the opacity has been lowered? Very st…

Accepted Answer

You could always try adding something to the element to cancel the click event?

For example

```
$(".element").click(function(e) {

if ( $(this).hasClass("unclickable") ) {
        e.preventDefault();
    } else {

$(this).addClass("unclickable");
        //Your code continues here
        //Remember to remove the unclickable class when you want it to run again.

}

}):
```

In your case you could try adding a check on the click.

```
$('#homeGalleryImage li a').attr('data-disabled', "disabled");
```

Then inside your click event

```
if ( $(this).attr("data-disabled" == "disabled") {
  e.preventDefault();
} else {
  //Ready to go here
} 
```

Edit

Here is a working example showing the element becoming unclickable. http://jsfiddle.net/FmyFS/2/

Prevent 'click' event from firing multiple times + issue with fading

Solution

Problem