Advertisements
How to Remove an Event Handler in jQuery
Topic: JavaScript / jQueryPrev|Next
Answer: Use the jQuery off() Method
You can simply use the jQuery off() method to remove the event handlers that were attached with on(). Don't use the unbind() method, it has been deprecated since jQuery 3.0.
If you try out the following example, you'll find the event handler function sayHello() is not executing for the button element having the id btnOff:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Remove Event Handler</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function sayHello(){
alert("Hello, World!");
}
$(document).ready(function(){
// Attach an event handler function to click event
$("#btnOn, #btnOff").on("click", sayHello);
// Removes the click event handler from second button
$("#btnOff").off("click");
});
</script>
</head>
<body>
<button type="button" id="btnOn">Click On</button>
<button type="button" id="btnOff">Click Off</button>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to stop firing event until an effect is finished in jQuery
- How to call multiple JavaScript functions in a single onclick event
- How to bind click event to dynamically added HTML elements in jQuery
Advertisements
