How to Remove an Event Handler using jQuery ?
Here, the task is to remove an event handler in the jQuery/JavaScript. There are three methods to solve this problem which are discussed below:
Using unbind() method: It is an inbuilt method in jQuery which is used to remove any selected event handlers.
Syntax:
$(selector).unbind(event, function, eventObj)
Approach:
- Select the selector on which the event handler is to be removed.
- Use the unbind() method to remove event.
- After click on the function under which unbind works will remove the event handler.
Example 1:
html
<!DOCTYPE html> <html> <head> <title> jQuery | How to remove an event handler? </title> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h3> Remove an event handler using unbind method </h3> <h4>Element to remove</h4> <button> Click Here </button> <script> $(document).ready(function() { $("h4").click(function() { $(this).slideToggle(); }); $("button").click(function() { $("h4").unbind(); }); }); </script></body> </html> |
Output:
- Before click anywhere:
- After click on the element h4:
- After clicking on the button event will not work:
Using off() Method: It is used to remove event handlers attached with the on() method.
Syntax:
$(selector).off(event, selector, function(eventObj), map)
Approach:
- Select the selector on which the event handler is to be removed.
- Use the off() method to remove event.
- After click on the function under which unbind works will remove the event handler.
Example 2:
html
<!DOCTYPE html> <html> <head> <title> jQuery | How to remove an event handler? </title> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h3> Remove an event handler using off method </h3> <h4>Element to remove</h4> <button> Click Here </button> <script> $(document).ready(function() { $("h4").click(function() { $(this).slideToggle(); }); $("button").click(function() { $("h4").off(); }); }); </script></body> </html> |
Output:
- Before click anywhere:
- After click on the element h4:
- After clicking on the button event will not work:
Please Login to comment...