How to Remove an Event Handler in jQuery

  117 views   2 months ago jQuery

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:

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Remove Event Handler</title>
<script src="https://code.jquery.com/jquery-3.4.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>

 

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com

Related Articles