I ran into a interesting problem tonight.
I was using the jqueryui buttonset on some forms because I love the way it looks:
http://jqueryui.com/button/#radio
But the problem was that when clicking a large number of radios in a row, sometimes the click didn’t seem to take. Further investigating appeared to show that when the mouse was moving – even slightly, it didn’t fire the click event. Apparently, this is a known bug and it is being worked on. In the meantime, however, I needed a fix.
Here’s what I came up with, and it looks like it works 100%!
I just bound the “mousedown” event to the label and fired the click event. Mousedown captures the click even if it’s moving and I bound it to the label because the input radio is actually hidden so it doesn’t receive any events.
Here’s the code:
$(document).ready(function() {
$('.buttons').buttonset();
$('.buttons label').bind('mousedown',function() {
$(this).trigger('click');
});
});