---
title: "Use of on() and off() function in jQuery"  
description: "Use of on() and off() function in jQuery"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2023-06-14  
canonical: https://www.mindstick.com/forum/156657/use-of-on-and-off-function-in-jquery  
category: "jquery"  
tags: ["jquery"]  
reading_time: 2 minutes  

---

# Use of on() and off() function in jQuery

What is the use of on() and off() [function in jQuery](https://www.mindstick.com/forum/157818/what-is-the-purpose-of-the-each-function-in-jquery-explain-with-an-example)? [Explain](https://www.mindstick.com/forum/157854/what-is-system-debugging-explain-some-system-debugging-tools-used-in-modern-computer-systems) it with the help of an example.

\

## Replies

### Reply by Aryan Kumar

The on() and off() methods in jQuery are used to attach and remove event handlers, respectively. They are both chainable methods, which means that you can call other jQuery methods on the returned object.

The on() method takes three arguments: the event type, the handler [function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server), and an optional selector. The event type is the name of the event that you want to attach the handler to. The handler function is the function that will be called when the event is triggered. The optional selector can be used to specify a specific set of elements to which the event handler should be attached.

Here is an example of how to use the on() method to attach a click event handler to all elements with the class 'my-class':

Code snippet

```plaintext
$('.my-class').on('click', function() {
  // Do something when the element is clicked
});
```

The off() method takes two arguments: the event type, and an optional selector. The event type is the name of the event that you want to remove the handler from. The optional selector can be used to specify a specific set of elements from which the event handler should be removed.

Here is an example of how to use the off() method to remove a click event handler from all elements with the class 'my-class':

Code snippet

```plaintext
$('.my-class').off('click');
```

The on() and off() methods are a powerful tool that can be used to easily attach and remove event handlers from elements.

Here are some additional examples of how the on() and off() methods can be used:

Code snippet

```plaintext
// Attach a mouseenter event handler to all elements with the class 'my-class'
$('.my-class').on('mouseenter', function() {
  // Do something when the mouse enters the element
});

// Remove the mouseenter event handler from all elements with the class 'my-class'
$('.my-class').off('mouseenter');

// Attach a click event handler to the element with the id 'my-element'
$('#my-element').on('click', function() {
  // Do something when the element is clicked
});

// Remove the click event handler from the element with the id 'my-element'
$('#my-element').off('click');
```


---

Original Source: https://www.mindstick.com/forum/156657/use-of-on-and-off-function-in-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.