How to bind event handlers with jQuery.on()

The jQuery.on() method provides a simplified and consistent syntax for event processing and is therefore widely used in interactive web application development. Here, we’ll present the syntax and some practical examples of the jQuery.on() function.

What is the jQuery.on() method?

jQuery.on() can bind event handlers to elements for specific events. It is used in web development to respond to user interactions and call functions. Using jQuery.on(), event handlers can be defined for events such as clicks, keystrokes, mouse movements, form inputs and many more. Furthermore, event delegation allows you to bind event handlers to elements even if they are added or removed at runtime. For example, the code to execute for the event could be adding a class with jQuery.addClass(). But locating elements using jQuery.find() is also possible. You can iterate with the loop function jQuery.each() in the function block. Event processing methods can also be conveniently integrated with jQuery in WordPress.

What do the syntax and parameters for the jQuery.on() method look like?

The syntax of jQuery.on() is as follows:

$(selector).on(event, childSelector, data, function, map)

• event: The name of the event you want the event handler to respond to, for example ‘click’, ‘keydown’, ‘submit’, etc.
• childSelector: is optional and is a CSS selector that specifies which child elements should trigger the event.
• data: optional additional data passed to the event handler.
• function: the function that will be executed when the event is triggered.
• map: allows binding multiple events and their event handlers in a single call by using an object mapping

For more information on notations and functions, see our jQuery tutorial from our guide.

An example of jQuery.on() in use

You can use the jQuery.on() method to bind events and execute certain code when triggered. Below we will introduce you to the processing of a click event:

$('#myButton').on('click', function() {
    console.log('Button was clicked!');
});

In this example, the event handler for the click event is bound to the button element with the ID ‘myButton’. When you click the button, the event handler function is executed and a message ‘Button has been clicked!’ is output to the console. By using jQuery.on(), you can also handle other events like ‘mouseover’, ‘keydown’ or ‘submit’ and define corresponding functions for each event.