Code has been added to clipboard!

Learn to Attach Event Handler with jQuery .change() Method

Reading time 1 min
Published Dec 29, 2017
Updated Oct 9, 2019

jQuery change: Main Tips

  • The jQuery .change() method is a shortcut of using either the .on() or .trigger() method with change event as the first parameter.
  • It attaches an onchange event handler to run when the jQuery change event occurs, or invokes said event.

Usage of .change() Explained

The .change() jQuery method attaches an event handler, invoked when the value of an input element (such as <input>, <textarea>, <select>) changes.

See the example below and enter anything in the field or check a checkbox. Clicking outside it will cause an alert to pop, telling you the input value has been changed:

Example
$("input").change(() => {
    alert("Your input value has been changed.");
});

The syntax for jQuery .change() is as follows:

$(selector).change([eventData], handler)

jQuery .change() can also trigger the event itself. Follow this simple syntax for that:

$(selector).change()

As you can see, .change() jQuery method takes two arguments. The eventData is an object, which contains data passed to the event handler. The event handler is a callback function. Additionally, you can add a selector.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 21/01/2021
3176 People Used
Only 97 Left
Rating
5.0