Firefox在输入复选框上出现Javascript单击事件的问题

Question

I'm using some Jquery code to modify the style class of a label that is related with the input being clicked. So to do that, I'm using the ui-state-active class added by primefaces, something like this:

$("input[type='checkbox']").click( function() {
    $(this).toggleClass("clicked"); //Just to have a reference of the component being clicked
    if ($("div:has(.clicked) + div").hasClass("ui-state-active")) {
        addSelected(compo); //Add class to the label related with the input
    } else {
        rmvSelected(compo); //Remove class to the label related with the input
    }
    $(this).toggleClass("clicked");
});

$("input[type='radio']").click( function() {
    //same
});

I know the code is kind of complex, but I had to do it like this because of the way primefaces renders it. The thing is, most of browsers like chrome, IE10, and even firefox just with the input[type='radio'] work like this: once the input is clicked, the class ui-state-active is added, and then the javascript click event is called, so my code works perfectly this way. But is happening to me that, just in firefox and just with the input[type='checkbox'] is working the other way around, ie is calling the click event first and then is adding the class ui-state-active , which makes my code fail. Is this a firefox bug? or a problem with my code? how can I solve it? Thanks.

PD: Tested with latest firefox version: 30.0

Answer 1

I'm temporarily solving it using if ($.browser.mozilla) { to add the needed behavior when the browser is firefox. Although I'm still looking for a more stylish solution.