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.

html

<!DOCTYPE html>  
<html>  

<head> 
    <title> 
        jQuery unbind() Method
    </title> 
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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>

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.

html

<!DOCTYPE html>  
<html>  

<head> 
    <title> 
        jQuery unbind() Method
    </title> 
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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>

Output:

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

jQuery | unbind() Method

Explore