jQuery Change Event

What You’ll Learn

The change event fires when an element’s value changes. This tutorial covers binding with .on("change"), passing eventData, triggering with .trigger("change"), handling selects vs text inputs, comparing change with blur and input, and why .val() does not fire change automatically.

Introduction

Dropdown menus, checkboxes, and text fields all need code that reacts when the user picks a different value. The change event is the standard signal that a form control’s value actually changed — not merely that the user clicked into or out of the field.

The official jQuery API distinguishes the change event (bound with .on("change") since 1.7) from the deprecated .change() method used in older code. To programmatically run change handlers after updating a value with script, use .trigger("change") — available since jQuery 1.0.

Understanding the change Event

The change event is sent to an element when its value changes. It applies to <input> (text, checkbox, radio, etc.), <select>, and <textarea> elements. The timing depends on the control type:

• Select, checkbox, radio — change fires immediately when the user makes a new selection with the mouse or keyboard.
• Text inputs and textareas — change is deferred until the element loses focus, and only if the value actually changed. Tab away without editing → no change event.

📝 Syntax

The modern jQuery API for the change event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("change" [, eventData ], handler) (since 1.7)

.on( "change" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called each time change fires: function( event ) { ... }.

2. Event delegation — .on("change", selector, handler)

$( "#form" ).on( "change", "select", function( event ) {
  // runs when any select inside #form changes — including future ones
} );

The change event bubbles (jQuery normalized IE bubbling since 1.4), so delegation works on parent forms.

3. Trigger the event — .trigger("change") (since 1.0)

.trigger( "change" )

• Runs bound change handlers on the matched element(s).
• Required after .val() updates when handlers must react to script-driven changes.

4. Unbind — .off("change" [, selector] [, handler])

$( ".target" ).off( "change" );              // remove all change handlers
$( "#form" ).off( "change", "select", fn );  // remove delegated handler

Official jQuery API examples

$( ".target" ).on( "change", function() {
  alert( "Handler for `change` called." );
} );

$( "#other" ).on( "click", function() {
  $( ".target" ).trigger( "change" );
} );

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 expand on the official select demo, text validation, and delegation. Use the Try-it links to run each snippet in the browser.

$( ".target" ).on( "change", function() {
  alert( "Handler for `change` called." );
} );

Select "Option 2" from dropdown → alert immediately

Edit text field, then tab away → alert (value changed)

Tab away from text field without editing → no alert

$( ".target" ).on( "change", function() {
  alert( "Handler for `change` called." );
} );

$( "#other" ).on( "click", function() {
  $( ".target" ).trigger( "change" );
} );

Click #other → $(".target").trigger("change")

Handler runs once per .target element (text input + select)

Alert may appear twice — one binding, two elements

$( "select" ).on( "change", function() {
  var str = "";
  $( "select option:selected" ).each( function() {
    str += $( this ).text() + " ";
  } );
  $( "#summary" ).text( str );
} ).trigger( "change" );

Page load → .trigger("change") → #summary shows default selection

User picks "Caramel" → #summary updates to "Caramel"

Chaining .trigger("change") after .on() is a common init pattern

$( "input[type='text']" ).on( "change", function() {
  var value = $( this ).val();
  var valid = value.length >= 3;
  $( this ).toggleClass( "invalid", !valid );
  console.log( "Changed:", value, "| valid:", valid );
} );

Type "ab" and tab away → .invalid added, valid: false

Type "abc" and tab away → .invalid removed, valid: true

Typing alone does not fire change — must blur after edit

$( "#order-form" ).on( "change", "select", function() {
  var label = $( this ).find( "option:selected" ).text();
  $( "#log" ).text( "Selected: " + label );
} );

Change existing select → #log updates

Click "Add flavor" → new select appears → change still works

One handler on #order-form covers all select children

🚀 Common Use Cases

• Country → state dropdowns — $("#country").on("change", loadStates) reloads dependent options.
• Price calculators — update totals when the user changes quantity or plan in a select.
• Toggle sections — show/hide form sections when a radio or checkbox changes.
• Filter tables — refresh results when a filter select changes — fires immediately, no blur needed.
• Post-.val() sync — $("#tier").val("pro").trigger("change") after AJAX prefills a form.
• Initial UI draw — .on("change", fn).trigger("change") on load to reflect default selections.

📝 Notes

• Bind with .on("change", handler) since jQuery 1.7 — not the deprecated .change(handler) method.
• Trigger with .trigger("change") since jQuery 1.0.
• Limited to <input>, <select>, and <textarea> — not generic divs.
• Text inputs: change fires on blur only if the value changed since focus.
• Select/checkbox/radio: change fires immediately on new selection.
• .val(newValue) does not fire change — call .trigger("change") afterward.
• Change bubbles — jQuery fixed IE bubbling consistency since 1.4.
• Use .off("change") to remove handlers — avoid deprecated .unbind("change").

💡 Best Practices