Checkbox change event

[aleidenfrostParticipant]

Hi there,
I have encountered a problem with the checkbox change event.

The scenario: I have a checkbox and several other input elements, mostly text inputs. There is an event handler on the checkbox change event.

The problem: If a user inputs something in a text input or an editable grid and then immediately checks a checkbox, the previously used input only loses focus AFTER the check event has run. This is a problem, because in the check event I want to manipulate an object, whose properties are bound to the input elements. But before the input element loses focus, the last input is not yet realized in the object, leading to data states in the object that the user does not expect.
I expect the prior element to lose focus before any event of the new element is fired. The present order of events does not make sense.

As a workaround, I use $(":focus").blur() in the change event handler before doing anything else. This works, but it would really help if I could rely on events firing in the locigal order.

Thanks for your attention,
Anne

[HristoParticipant]

Hello Anne,

Could you clarify your issue?
You use jqxCheckBox in jqxGrid. Is this right?
Could you provide us with a simplified example that demonstrates this issue?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[aleidenfrostParticipant]

Hi Hristo,

please see this JSFiddle for a simplified example. Write something in the textbox, then immediately check the checkbox without clicking anywhere else first. You will see that the checkbox change event is called before the text input change event.
This is contrary to the expected sequence of events. As I said in my original comment, this can be problematic, if you want to do additinal data processing in the check change event.
The workaround I described works of course, but if you encounter this problem for the first time, it takes a while to even find the cause.

Anne

[Peter StoevKeymaster]

Hi Anne,

The described behavior is actually by design. Text Inputs change events as in the standard HTML Input is raised on blur.

Regards,
Peter

[aleidenfrostParticipant]

Hi Peter,

I’m aware that the text input change event is raised on blur and that this is the correct behaviour.
I just think that the text input should be blurred (and thus raise the change event) before the check change event is raised. The way it works now seems to be: click on checkbox > check change event > checkbox gets focus > text input blur > text input change event. In my opinion it should be: click on checkbox > checkbox gets focus > text input blur > text change event > checkbox change event.

Please consider that if I use a button, the order of events is exactly as I expect: when clicking a button, the text input loses focus (raising its change event) before the button’s click event is raised. I don’t see why it has to work differently for a checkbox.

Regards,
Anne

[Author]

Posts