jQuery unbind() method

The unbind() method in jQuery is used to remove the event handlers from the selected elements. We can also use this method to remove all or specific event handlers. It can also be used to stop specified functions.

Syntax

Parameter values

This method accepts three optional parameter values that are defined as follows.

event: It is an optional parameter. It specifies one or more events to remove from the elements. If we want to remove multiple events, they must be separated by space.

function: It is also an optional parameter. This parameter specifies the function's name to unbind from the specified element or event.

eventObj: It is also an optional parameter. It comes from the event binding function.

When we use the unbind() method without using any arguments, the method will remove all event handlers attached to the element.

Let's understand the unbind() method by using some illustrations.

Example1

In this example, there are two h3 heading elements and a button. On hovering the elements with text Hover me, the mouseover event will be attached to them.

Here, we are using the unbind() function to unbind the mouseover event. We can check the working of the unbind() method by first hovering an h3 element and then clicking the given button. On hovering, the style of h3 heading will get changed, and when we click the given button, the hovering will not affect another h3 element.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
   $(document).ready(function(){
   $("h3").bind("mouseover",function(){
	   $(this).css({"background-color": "pink", "font-size": "25px"}).text("Hovered");
      });
      $("#b3").click(function(){
         $("h3").unbind("mouseover");
      });
   });
</script>
</head>
<body>
<h2> It is an example of using the jQuery unbind() method. </h2>
<p> Move the cursor over the below heading to attach the mouseover event. </p>
<h3> Hover me </h3>
<button id = "b3"> Remove event </button>
<h3> Hover me </h3>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

On moving the cursor on the first h3 element, the output will be -

After clicking the given button, when we hover the second h3 element, nothing will happen because the event is removed.

Example2

In this example, we are using the unbind() method to remove an event handler once the event has been triggered a certain number of times. Here, there is a div element whose width, height, and font-size can be increased only thrice. It is because the unbind() function will remove its click event once it is triggered thrice. On every click, the height and width of div will increase by 25px, and its font-size will increase by 10px.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<style>
div{
border: 5px solid blue;
width: 50px;
height: 50px;
}
</style>
<script>
$(document).ready(function(){
var i = 0, j = 1;
$("div").click(function(e){
$("div").animate({height: "+=25px", width: "+=25px", fontSize: "+=10px"}).text(j + " times").css({"color": "blue", "background-color": "yellow"});
i++;
j++;
if (i >= 3) {
$(this).unbind(e);
}
});
});
</script>
</head>
<body>
<h2> It is an example of using the jQuery unbind() method. </h2>
<p> The style of the following heading can only be changed thrice. </br> Click the follwing text to see the effect. </p>
<div> Click me </div>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -