jQuery | unbind() Method

The unbind() Method is an inbuilt method in jQuery which is used to remove any selected event handlers. This method can be used to remove particular event handler, or stop specific functions. It works on any event handler using an event object.

Note: If no parameters are provided, the method works on all event handlers from the specified element.
Syntax:

$(selector).unbind(event, function, eventObj)

Parameters: This method accepts three parameters as mentioned above and described below:

  • event: It is an optional parameter which is used to specify events (one or more) to remove them from the elements.
  • function: It is an optional parameter which is used to specify the name of the function to unbind from the specified event for the element.
  • eventObj: It is an optional parameter which is used to specify the event object to remove from the event binding function.

Example 1: This example describes the unbind() method to remove event handler from selected element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>  
<html>  
  
<head
    <title
        jQuery unbind() Method
    </title
      
    <script src=
    </script>
 </head
         
 <body style = "text-align:center;">  
     
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1>  
             
    <button
        Click Here 
    </button
          
    <!-- Script to illustrates unbind() method -->
    <script>
        $(document).ready(function() {
            $("h1").click(function() {
                $(this).slideToggle();
            });
              
            $("button").click(function() {
                $("h1").unbind();
            });
        });
    </script>
</body>  
  
</html

chevron_right


Output:

  • Before click anywhere:
  • After clicking on the element h1:
  • After clicking on the button event will not work:

Example 2: This example describes the unbind() method to remove event handler from selected element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>  
<html>  
  
<head
    <title
        jQuery unbind() Method
    </title
      
    <script src=
    </script>
      
    <style>
        h1 {
            border: 1px solid black;
            height: 100px;
            padding-top: 35px;
            background: green;
            color: white;
        }
    </style>
</head
         
<body style = "text-align:center;">  
     
    <h1>GeeksForGeeks</h1>  
      
    <button
        Remove event handler from geeks for geeks
    </button
      
    <!-- Script to illustrates unbind() method -->   
    <script>
        $(document).ready(function() {
            $("h1").click(function() {
                $(this).slideToggle();
            });
              
            $("button").click(function() {
                $("h1").unbind();
            });
        });
    </script>
</body>  
  
</html

chevron_right


Output:

  • Before click anywhere:
  • After clicking on the element h1:
  • After clicking on the button event will not work:


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 :

1


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