Question

I have a page with a linked image, where the link takes a bit of time to load. Therefore, users tend to click multiple times on it. This occasionally causes errors to crop up in the code. How do I prevent users from clicking on the link more than once?

In an attempt to remedy this, I changed the link to an onClick event and then in the function I used the code:

$('#myImageId').unbind('click');
window.location.href = "myLink";

However, that doesn’t seem to be helping. Also, I’d prefer to keep it a simple linked image instead of using javascript.

Answer 1

Once solution is to add a class to the element that is used as a flag to determine of the code should run.

Here’s an example: http://jsfiddle.net/qLhr8/

$('#myImageId').click(function() {
   var $th = $(this);
   if( !$th.hasClass( "pending" ) ) {
           // Add the "pending" class, so subsequent clicks will not
           //   run the code inside this if()
       $th.addClass( "pending" );
       window.location.href = "myLink";
       // you could do a setTimeout to remove the class
       //   if the new page never loads
   }
});

With the added class, you can also change the look of the image (lower its opacity perhaps) to indicate that it shouldn’t be clicked again.

.pending {
    opacity: .4;
    filter:alpha(opacity:40);
    cursor: wait;
}