How to bind event handlers with jQuery.on()

The jQuery.on() method provides a sim­pli­fied and con­sist­ent syntax for event pro­cessing and is therefore widely used in in­ter­act­ive web ap­plic­a­tion de­vel­op­ment. 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 de­vel­op­ment to respond to user in­ter­ac­tions and call functions. Using jQuery.on(), event handlers can be defined for events such as clicks, key­strokes, mouse movements, form inputs and many more. Fur­ther­more, event del­eg­a­tion 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 pro­cessing methods can also be con­veni­ently in­teg­rated with jQuery in WordPress.

What do the syntax and para­met­ers 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.
• childSe­lect­or: is optional and is a CSS selector that specifies which child elements should trigger the event.
• data: optional ad­di­tion­al 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 in­form­a­tion 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 pro­cessing 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 cor­res­pond­ing functions for each event.