onchange event not fire when the change come from another function
From the fine manual:
change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.
When you modify the text input's value through code, the change event will not be fired because there is no focus change. You can trigger the event yourself though with createEvent
and dispatchEvent
, for example:
el = document.getElementById('x');
ev = document.createEvent('Event');
ev.initEvent('change', true, false);
el.dispatchEvent(ev);
And a live version: http://jsfiddle.net/ambiguous/nH8CH/
Why is onchange event not firing on first change?
If I understand the question correctly, the problem is that on Firefox, the onchange
handler is not executed when you press down mouse button when the cursor is on the button of the slider and move the mouse. It is executed only after you release the mouse button after such a move.
This seems to be the correct behavior (though some other browsers don’t comply), since HTML5 CR says about the change
event: “if the element does not have an activation behavior defined but uses a user interface that involves an explicit commit action, then any time the user commits a change to the element's value or list of selected files, the user agent must queue a task to fire a simple event that bubbles named change at the input element.”
That’s a bit complicated formulation, but it is followed by a clarifying example: “A third example of a user interface with a commit action would be a Range controls that use a slider. While the user is dragging the control's knob, input events would fire whenever the position changed, whereas the change event would only fire when the user let go of the knob, committing to a specific value.”
The conclusion is that in this case, you should use the oninput
attribute instead of onchange
. In practice, onmousemove
works too, but oninput
is better, since it can be expected to work with input methods that do not use a mouse (whatever they might be, e.g. control by voice).
onChange event not firing when input changed dynamically
Since you're using jQuery, you can trigger the event:
$('#mainPane').trigger('change');
onChange event not firing when triggered from inline JavaScript
You can dispatch change
event from javascript like this:
<button onclick="number.value++;number.dispatchEvent(new Event('change'))">+</button>
Demo
var input = document.querySelector('#number')input.onchange = function(event){ alert('change');}input.oninput = function(event){ alert('change');}
<button onclick="number.value++;number.dispatchEvent(new Event('change'))">+</button><input type="number" id="number" value="0" />
jQuery change event not firing for input field
You can programmatically force a change event via the trigger('change')
method:
$('#elementID').trigger('change');
This assumes, of course, that $('#elementID')
is (still) bound to a change event...
Related Topics
Mobile Safari Sometimes Does Not Trigger the Click Event
Javascript: How to Redirect a Page After Validation
Show Multiple Divs on Button Click
React-Native React-Navigation Undefined Is Not an Object (Evaluating 'S.Value.Startswith')
How to Modify Chartjs Tooltip So I Can Add Customized Strings in Tooltips
Useselector Not Updating When Store Has Changed in Reducer. Reactjs Redux
How to Format and Display Json Data Using Array.Map in Reactjs
Django Template JavaScript Passing a Python Variable to a JavaScript One
Typescript - Possible to Disable Type Checking
How to Build Pdf File from Binary String Returned from a Web-Service Using JavaScript
Sort Json Data Based on Date and Time
How to Instantiate a File Object in JavaScript
Find Duplicate Values in Objects With JavaScript
Getting the Reason Why Websockets Closed With Close Code 1006
How to Get the Url Parameters Using Angularjs