Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Learn to Add Event Listeners Using jQuery .on() Method

Reading time 1 min
Published Jan 9, 2018
Updated Sep 27, 2019

jQuery on: Main Tips

  • The jQuery .on() method adds event listeners to the selected element.
  • The .off() function removes the event listeners added by on().
  • For instance, the .on() method with the change as the event parameter works similarly to change().

Usage and Syntax

The .on() jQuery method is used to add event handlers:

Example
$("div").on("click", function() {
   $(this).css("background-color", "red");
});

This is the syntax you need to use:

$("selector").on(event,selector,data,handler);

jQuery .on() method takes four arguments:

  • event - an event type to specify what handlers should be added. Accepts multiple values separated by commas.
  • selector - a selector to filter which descendants can trigger the jQuery event handler.
  • data - additional data that gets passed to the handler via the event.data when the event triggers.
  • handler - the handler function that is executed when the jQuery on event is triggered.

Note: if the selector is undefined or null in the jQuery on method, the handler applies to all of the children of the selected elements.