javascript text input change event not firing

Question

I have a text type input field and a checkbox. If I change the text and then click outside the input box (or press enter or tab) the change event is thrown. But if I enter some text and then click directly on the checkbox using the mouse, only the checkbox change event seems to be thrown.

I have the following code:

<input type="text" name="text" class="update">
<input type="checkbox" name="check" class="update">

and this jQuery:

$('.update').change(function(){
    console.log($(this));
});

Is this a known problem, and how can I make sure all change events are fired/thrown/caught in this setup?

Is that code in a $(document).ready(function()); function? You could try putting an alert() in the function to see if you're hitting the function. — codersarepeople
– codersarepeople, Commented Jan 13, 2011 at 21:55
Strange. Something else must be going on because my test works clicking from a changed text input to the checkbox jsfiddle.net/tbeseda/UCtyb — tbeseda
– tbeseda, Commented Jan 13, 2011 at 21:58
Are you sure? I copied the HTML/JS and could see both the events firing when I type something in textbox and then click on checkbox. — Chandu
– Chandu, Commented Jan 13, 2011 at 21:59
You are calling same event at the same time, so one of this calls will respond, just change the event on the text box and call it with jQuery separately — Mohammad
– Mohammad, Commented Jan 13, 2011 at 22:01
OK, so something else must be going on, you're right.. I'll make more tests. Actually I use the events to fire an ajax call, and only one of these ajax calls seems to be executed.. so I 'thought' it was the event not firing, but the problem may lie elsewhere.. — mikkelbreum
– mikkelbreum, Commented Jan 16, 2011 at 21:05

Dr Fred · Accepted Answer · 2017-05-12 21:16:12Z

2

To fire user changes, use the input event:

$('input').on('input',function(){...})

To fire code changes, use the DOMSubtreeModified event:

$('input').bind('DOMSubtreeModified',function(){...})

If you want to fire both user and code changes:

$('input').bind('input DOMSubtreeModified',function(){...})

The DOMSubtreeModified event is marked as deprecated and sometimes quite CPU time consuming, but it may be also very efficient when used carefully...

edited May 12, 2017 at 21:16

answered May 8, 2017 at 19:20

Dr Fred

9899 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drachenfels · Accepted Answer · 2011-06-20 17:13:09Z

1

I'm not sure if I get it. But for me when I try to type in textfield and then click checkbox by mouse both events are fired. But you have to keep in mind that event 'change' for text input means that this input has to loose focus, as long as field is focused no change event ever will be triggered. This somehow might be your case. Checkboxes/radioboxes work different way tho. No need to loose focus.

Cheers.

P.S. My test case: http://dl.dropbox.com/u/196245/index16.html

answered Jun 20, 2011 at 17:13

Drachenfels

3,3563 gold badges35 silver badges53 bronze badges

Comments

CamelBlues · Accepted Answer · 2011-01-13 21:56:10Z

1

The change event fires for both because you're listening to the update class.

answered Jan 13, 2011 at 21:56

CamelBlues

3,8235 gold badges33 silver badges39 bronze badges

Comments

James L · Accepted Answer · 2013-05-30 18:32:56Z

1

The change event will not fire unless the input focus switched to other controls

answered May 30, 2013 at 18:32

James L

1311 silver badge3 bronze badges

Collectives™ on Stack Overflow

javascript text input change event not firing

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related