Jquery UI toggle button (checkbox) click/drag bug

I'm posting this along with the best answer I have come up with. I haven't found any similar questions, so here goes.

When a input of type checkbox is converted to a jquery ui button, I have observed (as have others) that it only registers a click if the mouse is kept completely still while clicking. Any movement what-so-ever and nothing happens. To the user this can only be perceived as flaky and unreliable be开发者_如何学Chavior.

How do others work around this behavior (observed with jquery 1.6.3/jquery ui 1.8.16 in chrome 14 and ie 8)? Is there something obvious I am missing since I have to go to such lengths to get the expected behavior?

I got the idea for this workaround from an issue report on the jquery ui page linked to above, but it needed a bit of work: jsfiddle

I attach a click listener on the label and handle the state change myself. I also found it necessary to prevent text selection on the toggle button. This is done with css (found that elsewhere on SO)

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;   
}

Maybe this can save the next person that wants to use the jquery ui toggle button some time and grief. If anybody has a better/cleaner solution, I am very interested!

Old question, but I just thought I'd post this since I had the same question and made my way here --- Judging by the behavior of the jQuery UI buttons demonstrated in the demo here http://jqueryui.com/button/#radio using Firefox, it seems to have been fixed in v1.10.4. Here is the bug ticket - http://bugs.jqueryui.com/ticket/7665. And here is the changelog for v1.10.4 - http://jqueryui.com/changelog/1.10.4/

Fixed: Radio button & checkboxes ignore mouseclicks for minor mouse movements. (#7665, 52e0f76)

There is still a question of it not firing the click event though.

Actually, there is a bug in 1.8.13 and previous versions. If you click on a button and move/drag your cursor, then a button visually gets a selected state, but the underlying checkbox/radio is not selected. As a consequence, the form data sent to the server is inconsistent with what the user sees.

From version 1.8.14 this bug is solved. The downside is that you have to keep your mouse still. Keep that in mind, if you decide to use older version of jquery-ui.

I know this is a really old question, and has since been fixed, but I found this to be the only fix that worked for me:

http://ultcombo.github.com/UltButtons/

Hopefully jQuery will fix the actual issue soon.

I have a similar situation using the bootstrap framework, and the solution I found is not pretty at all, but it does do the trick for me.

I have to manually add to every involved element the following code:

.on('mousedown', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false })

Examples: In JavaScript, when I use jquery to add buttons into a dialog box:

.append($(document.createElement('a'))
    .attr({'class': 'btn', 'href': '#'})
    .append($(document.createTextNode('1')))
    .on('mousedown', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false })
)

or inline in HTML:

<a class="btn" href="#" onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false" onclick="UseButton(this); return false;" >1</a>

I tried adding it with jQuery after the buttons were created:

.on('mousedown', 'a.btn', function(ev) { ev.preventDefault [...] } )

but it just doesn't work - it apparently has to be added directly to the element.

As I said, not pretty, but at least in Firefox it works like a charm.

I just came across this as well. It seems as though even though this may be fixed in Jquery UI with some browsers, it still fails in Firefox. From what I've seen, if you click the button while moving the mouse, the button color changes, but the actual value of "input" never changes. So you can't use a "Change" event, but instead must use a "Click" event, and see if it actually changes. What I've done is include a refresh right when the click event occurs. Therefore if the input value is different than the button, it looks to the user as they've never clicked it.

$(function() { $( "#myButtonSet" ).buttonset(); });
$('#myButtonSet').on('click',function(){
      //This will reset the button back to it's original state if the input does not 
      //match what the user clicked. It is so fast that it seems to the user they never 
      //clicked the button at all, prompting them to do it again.
    $("input[name='myButtonSetName']").button("refresh"); 
});