**`on()`** is a built-in method in jQuery. It is used to assign one (or more than one) event handler to selected elements.

# Syntax
```javascript
$(selector).on(event, childSelector, data, function)
```
* **`event`**: On the specified selector, a function is executed when this specified event occurs.

* **`childSelector`**: The child elements of the specified selector for which the function should be fired (this is optional). In this case, the specified function will not be fired for the selector itself, but it will be fired for specified child elements.

* **`data`**: Any optional data for the specified function.

* **`function`**: This function is executed when the event occurs on the specified selector.



# Code
In the code below, the "click" `event` is specified on the `button` element. For every click, a function is executed. In this case, it prints a string.

## Library 
Include this library for jQuery:

```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
```

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").on('click', function(){
    $("#container").html("You clicked the button.");
  });
});
</script>
</head>
<body>

<button>Click Me!</button>
<div id ='container'></div>
</body>
</html>


codemirror

jQuery on() method

The jQuery on() method assigns event handlers to elements, supporting optional child selectors and data parameters.