jQuery .change()
Learn all about the jQuery function .change().
This method is a shortcut for .on( "change", handler )
in the first two variations, and .trigger( "change" )
in the third.
The change
event is sent to an element when its value changes. This event is limited to <input>
elements, <textarea>
boxes and <select>
elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
For example, consider the HTML:
1
2
3
4
5
6
7
8
9
10
|
|
The event handler can be bound to the text input and the select box:
1
2
3
|
|
Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. To trigger the event manually, apply .change()
without arguments:
1
2
3
|
|
After this code executes, clicks on Trigger the handler will also alert the message. The message will display twice, because the handler has been bound to the change
event on both of the form elements.
As of jQuery 1.4, the change
event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers.
Note: Changing the value of an input element using JavaScript, using .val()
for example, won’t fire the event.