Updated April 13, 2023
Definition of jQuery off
The jQuery off() method is used to removes event handlers. The jQuery off() method is a built in method in jQuery. The off() method remove the event handlers which are attached to the html elements by on() method. The unbind(), die() and undelegate() methods are replace by the off() method, which brings a lot of consistency to the API. The off() method with out any arguments removes all handlers attached to that elements. To remove specific handler an event names, selectors, name spaces, or handler function names can be pass.
Syntax:
$( selector ).off( event, selector, function( eventObj ), map);Parameters:
- selector – This is not an optional parameter, that specifies the element whose attached event handler is to be remove.
- event – This is not an optional parameter, that specifies events or namespaces or to from the selected elements. If multiple events are there then each event separated by the space.
- Function( eventobj ) – This is an optional parameter, that specifies the name of the function which is to be run to handle the event.
- map – This is not an optional parameter, that specifies an event map which is a key-value pair, where key specifies the events and values specifies the respective handler function.
Working of jQuery off() Method
The jQuery off() method is used to removes event handlers which is attached by on() method to the elements. For example a simple event as “click” is passed to the off() method, the all events of “click” type are removed from the elements. Note that selector string which is passed to off() method must match the string passed to on() method. By using the special characters “**” in off() method remove all delegated events from an element without removing non-delegated events.
Examples for jQuery off() Method
Next, we write the html code to understand the jQuery off() method more clearly with the following example, where the off() method is used to remove the single click event handler from h3 element, as below –
Example #1 – Remove the Single Event Handler
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery off() method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("h2").on("click", function() {
$(this).css("background-color", "red");
});
$("button").click(function() {
$("h2").off("click");
});
});
</script>
</head>
<body>
<h2> This is h2 header element register to event handling. click on it to generate an event. </h2>
<button> Click here to remove event handler from h3 element </button>
<h2> This is same h2 header element used here to confirm that the click event is removed or not. </h2>
</body>
</html>Output:
Once we click on the upper h2 element content, the output is:
Next click on the “Click here to remove event handler from h3 element”, and click the lower h2 content. Now it will not generate any event because the event is removed from the h2 element, the output is –
In the above code, the h2 element register to the click event, and later the click event is removed by using the off() method inside the button. So once we click that button the off() method gets a call and it remove the event. That’s way after clicking the button when we click the below h2 content it is not change its background to red.
Example #2 – Remove the Event Handler with the Handler Function
Next, we write the HTML code to understand the jQuery off() method, where the off() method is used to remove the click event handler from button elements and pass the handler function name to it to handle an event, as below –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery off() method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head>
<body>
<button id="id1" > Event </button> <br><br><br>
<button id="on"> On click event </button>
<button id="off"> Remove Click event </button>
<div style="display:none;"> Event Generated and Handled </div>
<script>
function flash() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#on" ).click(function() {
$( "body" )
.on( "click", "#id1", flash )
.find( "#id1" )
.text( "Click! to generate event." );
});
$( "#off" ).click(function() {
$( "body" )
.off( "click", "#id1", flash )
.find( "#id1" )
.text( "Event is off." );
});
</script>
</body>
</html>Output:
Once we click on the “On click event” button, the output is –
Now the event is on that button, if we click “Click! To generate event”, it display “Event Generated and Handled” text in fadeout style.
Next once we click on the “Remove click event” button, the output is –
As in the above program, the three buttons are created. The “event” button is register for the click event by using the on() method. The “on click event” button is used to on the event on “event” button and the last “Remove click event” button is used to off the “event” from event button.
Example#3 – Remove the Multiple Event Handler from Multiple Elements
Next, we write the HTML code to understand the jQuery off() method, where the off() method is used to remove the multiple different types of an event handler from multiple elements, as below –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery off() method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("h2").on("click", function() {
$(this).css("background-color", "red");
});
$("p").on("mouseenter", function() {
$(this).css("background-color", "red");
});
$("button").click(function() {
$("*").off();
});
});
</script>
</head>
<body>
<h2> This is h2 header element register to click event handling. click on it to generate an event. </h2>
<p> This is p element used here to register to mouse enter event handling. Enter the mouse over it to generate an event </p>
<button> Click here to remove all the events </button>
</body>
</html>Output:
Once we click on h3 content and enter the mouse over the p content the events get generate, as we can see in below output.
Next refresh the page and clock on “Click here to remove all the events” button and then click on h3 content and enter the mouse over the p content the events will not generate, because this button call the off() method and remove all different types of event from different elements, as we can see in below output.
Conclusion
The jQuery off() method is a built-in method, which is used to removes events handlers from the elements, which are attached by the on() method.
Recommended Articles
This is a guide to jQuery off. Here we discuss the Description of jQuery off, syntax, parameters, and Working of the jQuery off() Method along with the examples respectively. You may also have a look at the following articles to learn more –
