Why do my jQuery checkbox.change events only fire on leavefocus in IE but they happen onclick in FF?

Question

    $(".feature").change(function(){
        getProductSelections();
    });

ARRRGHH!!

Answer 1

Web Bug Track:

The onchange event can be attached (inline or as an event handler) to any form element. It fires whenever the value of the form field changes. Unfortunately, the behavior is a bit strange in IE, in that for a checkbox, or a radio button field, the event doesn't fire when it is supposed to (right when you click the option you want to choose), but instead it only fires, when you click elsewhere on the page/form, or if you explicitly call blur(); on the field.

And the work around suggested is:

<input type="radio" name="foo" value="Green" onclick="alert(this.value);"/>Green
<input type="radio" name="foo" value="Blue" onclick="alert(this.value);"/>Blue

Answer 2

Problem with Lucas's solution is that this will trigger even if you click the same option again.

The solution I found to work was to add onclick="this.blur();" to the radio button tag which forces it to trigger the onchange only if it has changed.

<input type="radio" name="foo" value="Green" onclick="alert(this.value);" onclick="this.onBlur();" />Green
<input type="radio" name="foo" value="Red" onclick="alert(this.value);" onclick="this.onBlur();" />Red

Hope this helps.