Updated April 10, 2023
Introduction to jQuery unbind
The jQuery unbind() function is used to remove all or specific event handlers from the selected elements. The jQuery unbind() function is a built in function in jQuery. The unbind() function remove event handler which was added by using the bind() function and it also stops the specified function which runs when an event generate.
Syntax of jQuery unbind() Function:
jQuery.unbind(event, function, eventobject);Parameters:
- event: This is an optional parameter, that specifies the one or more events which are to be unbind or remove from the specific element. If only event parameter is passed to this function, then all the functions bonded to this specific event will stop running.
- function: This is an optional parameter, that specifies the name of the function which is to be unbind from the specific event.
- eventObject: This is an optional parameter, that specifies the event object which is to be unbind from the event binding function.
Note that if we do not pass any parameter to the unbind() function, then the unbind() function removes all the events handler bind to that specific element.
Working of jQuery unbind() Function
- The unbind() function accepts three parameters, the first parameter is the name of the event, the second parameter is the function handler name and third parameter is the name of the object.
- Suppose that on the “h2” element the “mouseover” and “click” events are bind which are to be move now, so we will use the unbind() function as “$(“h3”).unbind();”, which remove both of the event from the “h2” element.
- If we want to remove only “click” event then the unbind() function as “$(“h3”).unbind(“click”);”.
Examples of jQuery unbind()
Given below are the examples of jQuery unbind:
Example #1
Example of jQuery unbind() function to show the working of unbind() function.
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery unbind() function </title>
<!-- code to show the jQuery unbind() working function -->
<script>
$(document).ready(function(){
$("#btn").bind("click", function(){
alert("The button was clicked.");
});
$("#btn2").click(function() {
$("#btn").unbind();
});
});
</script>
</head>
<body>
<!-- Click on this button to see the change -->
<button id="btn"> Click on this button to generate event. </button>
<br><br><br>
<button id="btn2"> Click on this button to remove event. </button>
</body>
</html>Output:
Once we click on the first button, the output is:
Now, click on the second button and then click on the first button. This time the event will not generate and the alert message will not be display.
In the above code the bind() function is using and the specified event that is click is attached to the button html element and further with the help of unbind() function all the attached events or click event is removing because no parameter is passed to it.
Example #2
Example of jQuery unbind() function to show how the specific event is unbind or remove among the multiple the events bind on the element.
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery unbind() function </title>
<style>
button {
font-weight: bold;
background: yellow;
cursor: pointer;
padding: 6px;
}
button.over {
background: red;
}
span {
color: black;
}
</style>
</head>
<body>
<h2> The button to handle click, double click, mouseenter, mouseleave events : </h2>
<!-- Click on this button to see the change -->
<button id="btn"> Click on this button. </button>
<span></span>
<br><br>
<button id="btn2"> Click on this button to remove click and </button>
<!-- code to show the jQuery unbind() working function -->
<script>
$( "#btn" ).bind( "click", function( event ) {
var pos = "( " + event.pageX + ", " + event.pageY + " )";
$( "span" ).text( "This is a single click and position is " + pos );
});
$( "#btn" ).bind( "dblclick", function() {
$( "span" ).text( "This is a double click event on " + this.nodeName );
});
<!-- code to show the jQuery bind( ) working with more than one events -->
$( "#btn" ).bind( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "over" );
});
$("#btn2").click(function() {
$("#btn").unbind("click");
});
</script>
</body>
</html>Output:
Once we click on the “click on this button” button, the output is:
When we double click and move mouse over the “click on this button”, the output is:
Now, click on the second button and then click on the first button. This time the click event will not generate, but the mouse over and double click events work.
In the above code the multiple events such as click, double click, mouseenter and mouseleave are attached by bind() function to the button element and further with the help of unbind() function only the click event is removing because click event name is passed to the unbind function.
Example #3
Example of jQuery unbind() function to show how to remove an event and stop the execution of the function handler on an element.
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery unbind() function </title>
<script>
function eventhandler(e) {
alert(e.data.msg);
}
<!-- code to show the jQuery bind( ) working function with passing data along with function-->
$(document).ready(function() {
$("#btn").bind("click", { msg: "You clicked the Button!" }, eventhandler)
<!-- jQuery unbind() working function with passing event name along with function-->
$("#btn2").click(function() {
$("#btn").unbind("click", eventhandler);
});
});
</script>
<style>
button {
font-weight: bold;
background: yellow;
cursor: pointer;
padding: 6px;
}
</style>
</head>
<body>
<!-- Click on this button to see the change -->
<button id="btn"> Click on this button </button>
<br><br>
<button id="btn2"> Click on this button to remove click and </button>
</body>
</html>Output:
Once we click on the first button, the output is:
Now, click on the second button and then click on the first button. This time the event will not generate.
In the above code the click attached and bind the eventhandler() function by bind() function to the button element and farther with the help of unbind() function the event and handler function are removing, as we can see in the above output.
Conclusion
The jQuery unbind() function is a built in function in jQuery, which is used to remove all or specific event handlers from the selected elements which are bind by bind() function.
Recommended Articles
This is a guide to jQuery unbind. Here we discuss the introduction, working of jQuery unbind() function and examples respectively. You may also have a look at the following articles to learn more –
