jQuery | on() with Examples

16 Apr, 2020
The on() is an inbuilt method in jQuery which is used to attach one or more event handlers for the selected elements and child elements in the DOM tree. The DOM (Document Object Model) is a World Wide Web Consortium standard. This defines for accessing elements in the DOM tree.Syntax:
$(selector).on(event, childSelector, data, function)

Parameter: It accepts some parameters which are specified below-
event: This specifies the events that are attached to the selected element.
childSelector: This is optional and this specify the specific child to which given event handler can be used.
data: This is optional and this specifies additional data to be passed along with the function.
function: This specifies the function to run when the event occurs.
Return Value: This returns all the event handler that are attached to selected element.
jQuery code to show the working of on() method:Code #1:In the code below child specifier and data is not passed.
<html>  <head>    <script src="https://ajax.googleapis.com/ajax/             libs/jquery/3.3.1/jquery.min.js"></script>    <script>        <!--jQuery code to show on method -->        $(document).ready(function() {            $("p").on("click", function() {                document.getElementById("p1").innerHTML = "Paragraph changed!";            });        });    </script>    <style>        #p1 {            font-size: 30px;            width: 400px;            padding: 20px;            border: 2px solid green;        }    </style></head>  <body>    <!--click on this paragraph -->    <p id="p1">Click Here !!!</p></body>  </html>
Output:Before clicking on generated output-After clicking on generated output-
Code #2:In the below code data and message both are being passed to the function.
<html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/              jquery/3.3.1/jquery.min.js"></script>    <script>        <!--jQuery code to show on method -->        function handlerName(event) {            var t = event.data.msg;            document.getElementById("p1").innerHTML = t;          }          $(document).ready(function() {            $("p").on("click", {                msg: "You just clicked the given paragraph !"            }, handlerName)        });    </script>    <style>        #p1 {            font-size: 30px;            width: 470px;            padding: 20px;            border: 2px solid green;        }    </style></head>  <body>    <!--click on this paragraph -->    <p id="p1">Click Me!</p></body>  </html>
Output :Before clicking the generated output-After clicking the generated output-
frikishaan
jQuery-Events
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to add options to a select element using jQuery?
jQuery | children() with Examples