jQuery .change() Method

What You’ll Learn

The .change() method is jQuery’s legacy shorthand for binding and triggering the change event. This tutorial covers .change(handler) since 1.0, .change(eventData, handler) since 1.4.3, no-argument .change() as a trigger, migration to .on("change") and .trigger("change"), and why the binding form is deprecated since jQuery 3.3. For the modern change event API, see the jQuery change event tutorial.

Introduction

Older jQuery form scripts often react to dropdown and input updates with a single short call: $("#country").change(function(){ ... }). Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — and .change() was the go-to for select boxes and text fields.

Understanding .change() matters when maintaining legacy themes, admin panels, and Stack Overflow snippets. The method does two jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles — .on("change", handler) for binding and .trigger("change") for firing.

Understanding the .change() Method

The official jQuery API describes .change() as a way to bind an event handler to the change event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched input, select, or textarea and calls it when the value actually changes — the same change event that .on("change") handles today.

When you call .change() with no arguments, jQuery synthetically fires change on each matched element. This is the legacy trigger shorthand — equivalent to .trigger("change"). It is commonly chained after .val() because setting a value with script does not fire change automatically.

📝 Syntax

The .change() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("change") is preferred:

1. Bind a handler — .change( handler ) (since 1.0, deprecated 3.3)

.change( handler )

• handler — function executed each time change fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "change", handler ).

2. Bind with eventData — .change( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.change( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "change", eventData, handler ).

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

.change()

• No arguments — triggers change on every matched element.
• Runs bound change handlers — use after .val() when script updates a field.
• Preferred replacement: .trigger( "change" ).

Official jQuery API migration note

// Deprecated binding
$( "select" ).change( function() {
  alert( "Handler for `change` called." );
} );

// Modern binding
$( "select" ).on( "change", function() {
  alert( "Handler for `change` called." );
} );

// Deprecated trigger (common after .val())
$( "#country" ).val( "US" ).change();

// Modern trigger
$( "#country" ).val( "US" ).trigger( "change" );

Return value

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

Examples Gallery

Five examples cover binding, eventData, triggering after .val(), migration from .change() to .on("change"), and init chaining. Use the Try-it links to run each snippet. Remember: binding with .change(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( "#country" ).change( function() {
  var label = $( "#country option:selected" ).text();
  $( "#out" ).text( "Selected: " + label );
} );

User picks "Canada" from #country → #out shows "Selected: Canada"

Select change fires immediately — no blur needed

Deprecated — prefer .on("change", fn) for new code

$( ".plan-select" ).change( { currency: "USD" }, function( event ) {
  var plan = $( this ).val();
  $( "#out" ).text(
    "Plan: " + plan + " | currency: " + event.data.currency
  );
} );

Change Basic plan → "Plan: basic | currency: USD"

Change Pro plan → "Plan: pro | currency: USD"

Same handler, shared eventData on every .plan-select

$( "#tier" ).change( function() {
  $( "#out" ).text( "Tier is now: " + $( this ).val() );
} );

$( "#set-pro" ).click( function() {
  $( "#tier" ).val( "pro" ).change();
} );

Click #set-pro → $("#tier").val("pro") alone would NOT update #out

.val("pro").change() → handler runs → "Tier is now: pro"

Prefer .trigger("change") over .change() in new code

$( "#legacy" ).change( function() {
  $( "#out" ).text( "Legacy: .change(function(){ ... }) — deprecated since jQuery 3.3." );
} );

$( "#modern" ).on( "change", function() {
  $( "#out" ).text( "Modern: .on('change', function(){ ... }) — use this for new code." );
} );

Change #legacy select → legacy deprecation message

Change #modern select → modern .on("change") message

Behavior is identical — only the API name differs

$( "#flavor" )
  .change( function() {
    var text = $( "#flavor option:selected" ).text();
    $( "#summary" ).text( "You picked: " + text );
  } )
  .change();

Page load → .change(fn) binds, then .change() triggers

#summary shows default "You picked: Chocolate" immediately

User changes select → handler runs again

Modern equivalent: .on("change", fn).trigger("change")

🚀 Common Use Cases

• Reading legacy code — recognize $("#country").change(fn) as equivalent to .on("change", fn) in older form scripts.
• Dependent dropdowns — legacy tutorials bind .change() to reload state lists when country changes.
• Post-.val() sync — $("#plan").val("enterprise").change() after AJAX prefills a form.
• Shared eventData — $(".filter").change({ table: "#users" }, fn) passes context without closures.
• Initial UI draw — .change(fn).change() on load to reflect default selections.
• WordPress & admin UIs — many themes still use .change() — know how to migrate safely.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .change(handler) or .change(eventData, handler) in new code. Use .on("change") instead.
• Bind with .change(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .change() triggers the event since jQuery 1.0 — prefer .trigger("change").
• .change() does not support event delegation — use .on("change", selector, fn) for dynamic forms.
• .val(newValue) does not fire change — chain .change() or .trigger("change") afterward.
• Text inputs: change fires on blur only when value changed; selects fire immediately.
• For the full modern change event guide — timing, bubbling, and validation — see the jQuery change event tutorial.

💡 Best Practices