jQuery | off() Method

The off() Method in jQuery is used to remove event handlers attached with the on() method. The off() method brings a lot of consistency to the API and it replace unbind(), die() and undelegate() methods.

Syntax:

$(selector).off(event, selector, function(eventObj), map)

Parameter: This method accepts four parameters as mentioned above and described below:

  • event: It is required parameter and used to specify one or more events or namespaces to remove from the selected elements. Multiple events are separated by space.
  • selector: It is optional parameter and used to match with the one originally passed to the on() method when attaching event handlers
  • function(eventObj): It is optional parameter and used to specify the function to run when the event occurs.
  • map: This parameter is used to specify the event map ({event:function, event:function, …}) which contains one or more event attach to the elements, and functions to run when the events occur.

Example 1: This example removes the event handler.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery off() method
    </title>
  
    <script src=
    </script>
      
    <!-- Script to remove event handler -->
    <script>
        $(document).ready(function() {
            $("h3").on("click", function() {
                $(this).css("background-color", "green");
            });
              
            $("button").click(function() {
                $("h3").off("click");
            });
        });
    </script>
</head>
  
<body>
        <h3>GeeksforGeeks</h3
          
        <button>
            Click to remove event handler
        </button>
</body>
  
</html>

chevron_right


Output:
Before Click on the element h3:

After Click on the element h3:

Example 2: This example use animate event to add animation effect one time and then remove the event handler.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery off() method
    </title>
      
    <script src=
    </script>
      
    <!-- Script to animate the event -->
    <script>
        $(document).ready(function() {
            var x = 0;
              
            $("h3").click(function(event) {
                $("h3").animate({fontSize: "+=10px"
            });
              
            x++;
              
            if (x >= 1) {
                $(this).off(event);
            }
            });
        });
    </script>
</head>
  
<body style="text-align:center;">
  
    <h1>Welcome to GeeksforGeeks!.</h1
            
    <div style="background-color:green;">
        <h3>
            Geeks for Geeks. Click to increase
            the size (only one time)
        </h3>    
    </div>
</body>
  
</html>

chevron_right


Output :
Before Click on the heading:

After Click on the heading:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.