jQuery off() Method

jQuery | off() Method: Learn about the jQuery off() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 30, 2022

off() Method

Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the off() method here.

The off() method is a built-in jQuery method. This method helps to remove one or more event handlers attached to the element using the on() method. Every time the specified event is fired for the selected element, the off() method gets triggered and hence removes the attached event handler from it.

This method is used in place of the jQuery deprecated methods like – die(), unbind(), etc.

off() Method Syntax

$('selector').off(event, function);

It takes the following parameters:

The event has to be attached to the selected element. More than one event can also be defined for a single element (with spaces in between them).
The function allows performing some tasks when the off() method is called.

jQuery off() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>

  <body>
    <h2>jQuery Event - Off</h2>
    <p>Click the button to remove the event handlers from the following sentences.</p>
    <button>Off</button>
    <hr>
    <h4 style="color:darkblue">Welcome to Include Help !</h4>
    <h4 style="color:darkblue">Thanks for visiting !</h4>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('h4').on('click',function(){
            $(this).html('You Clicked Here');
        });
        $('button').click(function(){
            $('h4').off('click');
            $('h3').html('Off Method Called')
        });
    });
  </script>
</html>

Output:

jQuery error() Method

jQuery on() Method

Comments and Discussions!

Load comments ↻