jQuery UI -- buttonset buttons don't always work on first click

Question

I am using a jQuery UI buttonset (based on a few radio buttons.) Everything works pretty fine except sometimes when you click on one of the buttons nothing happens (just as if you had never clicked it at all). I thought perhaps it was perhaps a problem with my implementation so I went to the demo site:

http://jqueryui.com/demos/button/#radio

And spent some time clicking around flipping between the different choices. I had the same problem! Randomly the click would be ignored!

I came across this site:

http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

Which rolled their own version and I was unable to replicate the same issue. Which leads me to believe that there is some minor quirk with the jQuery UI implementation?

Has anyone seen this? I spent some time trying to find others having the same problem and haven't found any mention of it. Does anyone else see the same issue?

Answer 1

This happens for me too.

I think the problem is that you have to hold your mouse still when clicking the button, or it will not work.

For example, try clicking the button while moving your mouse at a slow, steady pace. The button won't work unless the mouse is barely moving. Also try dragging the button even just one pixel, then releasing.

The site you came across that works seems to use mousedown to avoid this problem. They are also using an older version of jQuery UI, which might be a factor.

Answer 2

 $( "#radio" ).buttonset();
 $( "#radio" ).find("label").unbind("mouseup");

because in jquery source code there is:

.bind( "mouseup" + this.eventNamespace, function( event ) {
  if ( options.disabled ) {return; }
  if ( startXPos !== event.pageX || startYPos !== event.pageY ) {
                    clickDragged = true;
   }
}