jQuery off() Method


The majority of the time, programmers are worried about binding event handlers, or specifying a JavaScript function that will be called when an event takes place. Any user action on the website, including mouse clicks, hovers, scrolls, and pretty much anything else, can be considered an event. Event binding is made simple by using the jQuery.

There may be instances where you decide that you no longer want your event handler function to be called for whatever reason. A situation where the user is not verified and you wish to stop him from executing further activities can arise, for instance.

JQuery. off()

Event handlers can be removed using the jQuery off() method. It is used to remove event handlers that the on() method has connected to html elements. The off() function replaces the unbind(), die(), and undelegate() methods, greatly enhancing API consistency. All handlers attached to that element are removed by the off() method when it is called without any arguments. We can pass Event names, selectors, name spaces, or handler function names in order to delete a specific handler.

Syntax

Following is the syntax for jQuery .off() method

$(selector).off(event,selector,function(eventOb),map)

Example

Let’s look at the following example, where we are going to remove the single event handler.

<!DOCTYPE html>
<html>
<body>
   <h3>WELCOME</h3>
   <button>Remove Event</button>
   <h3>TUTORIALSPOINT</h3>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script>
      $(document).ready(function() {
         $("h3").on("click", function() {
            $(this).css("color", "#DE3163");
         });
         $("button").click(function() {
            $("h3").off("click");
         });
      });
   </script>
</body>
</html>

When we execute the above script it will generate an output consisting of two text along with a button on the webpage. Both the text is applied with same function that applies color when we click on them. Now we are going to observe that when the user clicks on one text, it will change color, and when the user clicks the button, the event gets removed. The next text won't change color when the user clicks on it.

Example

Considering another example where we are going to create the add and remove event handlers.

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <style>
      body {
         background-color: #D5F5E3;
         color: #DE3163;
      }   
      button {
         color: #DE3163;
      }
   </style>
</head>
<body>
   <button id="on">Make Event on.!</button>
   <br>
   <br>
   <br>
   <button id="tp1">TP</button>
   <br>
   <br>
   <br>
   <button id="off">Make Event off.!</button>
   <div style="display:none;">HELLO.!WELCOME.</div>
   <script>
      function flash() {
         $("div").show().fadeOut("slow");
      }
      $("#on").click(function() {
         $("body").on("click", "#tp1", flash).find("#tp1").text("Event is On.! Click to get message");
      });
      $("#off").click(function() {
         $("body").off("click", "#tp1", flash).find("#tp1").text("Event is off.");
      });
   </script>
</body>
</html>

On running the above script, it will generate an output consisting of the three buttons on the webpage. When the user clicks the first button, the event gets activated for the second button and allows the user to generate a message on clicking it. When the user tries to click the third button, the event gets triggered, making the event trigger off.

Example

In the following example, we are going to remove the event handler when it meets a certain situation.

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <style>
      body {
         font-family: verdana;
         color: #DE3163;
         background-color: #D5F5E3;
      }
   </style>
</head>
<body>
   <h2>WELCOME</h2>
   <p>Click on h3 text to observe changes</p>
   <script>
      $(document).ready(function() {
         var x = 0,
            y = 1;
         $("h2").click(function(a) {
            $("h2").animate({
               fontSize: "+=6px"
            });
            x++;
            y++;
            if (x >= 4) {
               $(this).off(a);
            }
         });
      });
   </script>
</body>
</html>

When we execute the above script, it will generate an output consisting of the text on the webpage. When the user tries to click the heading text, the event gets triggered and increases the font size up to the four clicks made by the user; after that, the event gets removed.

Updated on: 19-Jan-2024

332 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements