Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery unbind() Method
jQuery | unbind() Method: Learn about the jQuery unbind() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 19, 2022
unbind() Method
Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the unbind() method here.
The unbind() method is an inbuilt jQuery method that helps to remove one or more than one event handler from the element selected. This means that it will delete the events from the selected element. Using unbind(), either all of the events or specific events can be removed. It can also stop the specified running function for the element.
unbind() Method Syntax
$('selector').bind('event', function, eventObj);
It takes three optional parameters – event, function, and eventObj.
The event is the event handler that has to be removed from the element. Single or more than one event handler can be specified over here with spaces to unbind them. If no event name is given here, then it ends up removing all the event handler attached to the selected element.
The function is the name of the function that has to be stopped executing.
jQuery unbind() Method Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>jQuery Event - Unbind</h2>
<p>Click the following button to unbind the events from the element.</p>
<button>Unbind Event</button>
<hr>
<br>
<div>This is div element one.</div>
<br><br>
<div>This is div element two.</div>
<br><br>
<div>This is div element three</div>
<br>
<hr>
<h3></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('div').click(function(){
$(this).css({'color':'teal','font-size':'20px','font-weight':'bold'});
});
$('button').click(function(){
$('div').unbind();
$('h3').html('Event Handler has been unbinded from the div element.');
});
});
</script>
</html>
Output:
