Open In App

jQuery | unbind() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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.




<!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


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.




<!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


Output:

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


Last Updated : 20 Feb, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads