jQuery click event only working after moving the mouse

Question

I'm getting close to desperate here but I can't seem to find any solution to this. I basically have a problem with a click event that somehow acts as a drag event. Which is odd because, as far as I can tell, it really shouldn't.

Let me explain what's what. I have these simple radio buttons:

<div class="fruitButtons">
  <input type="radio" name="radio" id="Apple">
    <label for="Apple">Apple</label>
  <input type="radio" name="radio" id="Banana">
    <label for="Banana">Banana</label>
  <input type="radio" name="radio" id="Citron">
    <label for="Citron">Citron</label>
</div>
<br><b>selected:</b>
<div class="status">none</div>

I use jQuery UI to transform these regular buttons into a nice looking buttonset via $(".fruitButtons").buttonset();.

Now I need the possibility to reset the buttonset, i.e. to uncheck all buttons at once. Since I don't want a separate reset button for that, I need the reset to happen when you click on an already checked button. To me, this is the most intuitive way to handle these radio buttons.

This is the (obviously simplified) way it's supposed to work:

$(function() {
    $(".fruitButtons").buttonset();
    var uncheck = apple = banana = citron = 0;

    $(".fruitButtons label").click(function(){
        var name = $(this).text();

        // see if button was previously checked
        // if yes set var 'uncheck' to 1
        if ((name == "Apple") && (apple)) uncheck = 1;
        if ((name == "Banana") && (banana)) uncheck = 1;
        if ((name == "Citron") && (citron)) uncheck = 1;
        apple = banana = citron = 0;

        if (!uncheck) {
            if (name == "Apple") apple = 1;
            if (name == "Banana") banana = 1;
            if (name == "Citron") citron = 1;

            // display name of currently checked button
            $(".status").text(name);
        }

        else {
            // unchecking the hidden input element
            $(this).prev().prop("checked", false);

            // resetting the buttonset to its initial state
            $(this).parent().buttonset("refresh");

            $(".status").text("none");
            uncheck = 0;
       }
    });
});

Check out the Fiddle: http://jsfiddle.net/6yx0rqjf/6/

But here's the problem: The unchecking process does not work properly. In fact, it only works when you actually drag the mouse while clicking, i.e. if you move the mouse a little while the mouse button is depressed.

Updating the $(".status") part works perfectly every time you click the button, but unchecking it is only succesful if you move the mouse a little.

How is this possible? Is this a bug? I was able to reproduce this behavior on Firefox 40.0.3 and Chrome 45.0.2454.85. I also found this unresolved question that may be somehow related: jQuery click event only working after moving the mouse in Chrome

So, can anyone help me fix this? Is that even possible?

I see. Changing the text to `None` works, but changing the style of the button doesn't. — Barmar, Sep 02 '15 at 21:55
Since this is working on jsFiddle, are you saying that it does not work in your code? — Dawn Green, Sep 02 '15 at 21:55
@DawnGreen For me, it's neither working on jsFiddle nor in my code. — dactyL, Sep 02 '15 at 22:01
Yes, that's what I meant, I can reproduce it. You just didn't describe the problem clearly. — Barmar, Sep 02 '15 at 22:03
The click event is obviously working, since it's doing `$(".status")text("none")`. But something else is causing the button's state to change. — Barmar, Sep 02 '15 at 22:03
But does it work when you move the mouse while clicking? Or am I imagining things? — dactyL, Sep 02 '15 at 22:08
dactyL, since it is working for me on jsFiddle, I have to wonder if there is a problem with your browser. Have you tried it on another machine? — Dawn Green, Sep 02 '15 at 22:10

score 1 · Accepted Answer · answered Sep 02 '15 at 22:12

I think the problem is that you're putting the click handler on the label, not the button itself. I moved it to the button, and adjusted the code, and it works correctly.

$(function() {

    var uncheck = apple = banana = citron = 0;

    $(".fruitButtons").buttonset();
    $(".fruitButtons :radio").click(function(){

        var name = $(this).next("label").text();

        // see if button was previously checked
        // if yes set var 'uncheck' to 1
        if ((name == "Apple") && (apple)) uncheck = 1;
        if ((name == "Banana") && (banana)) uncheck = 1;
        if ((name == "Citron") && (citron)) uncheck = 1;
        apple = banana = citron = 0;

        if (!uncheck) {
            if (name == "Apple") apple = 1;
            if (name == "Banana") banana = 1;
            if (name == "Citron") citron = 1;

            // display name of currently checked button
            $(".status").text(name);
        }

        else {
            // unchecking the hidden input element
            $(this).prop("checked", false);

            // resetting the buttonset to its initial state
            $(this).button("refresh");

            $(".status").text("none");
            uncheck = 0;
       }
    });

});

FIDDLE

Wow, thank you a lot, it works perfectly! I really don't remember why I put the click event on the label... — dactyL, Sep 02 '15 at 22:21

jQuery click event only working after moving the mouse

1 Answers1