jQuery undelegate() Method

jQuery | undelegate() Method: Learn about the jQuery undelegate() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 30, 2022

undelegate() Method

Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the undelegate() method here.

The undelegate() method is a built-in jQuery method. The undelegate event helps to remove the event handlers attached to the selected element using the delegate() method. Any particular event handler can be specified to remove it from the element.

undelegate() Method Syntax

$('selector').undelegate('selector','event',function(){});

This method takes three optional parameters – selector, event name, and function.

The selector can be specified to target those elements whose event handlers have to be removed. It can be specified using tag name, class, id, etc.
The event name can be given to specify the event present on the selected element that needed to be removed. If no event name is given, then all the events for that element are removed.
The function is the action that is executed once the specified event is removed.

Note: The undelegate event has been deprecated in version 3.0. Therefore, now we use the off() method to perform the required task.

jQuery undelegate() Method Example

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>

  <body>
    <h2>jQuery Event - Undelegate</h2>
    <p>Click the button to remove the event handlers attched to the div element using delegate() method.</p>
    <button>Undelegate</button>
    <hr>
    <div class="parent">
      This is Parent Class.
      <div class="child"><br>- This is a Child Class - One</div>
      <div class="child">- This is Child Class - Two</div>
    </div>
    <hr>
  </body>

  <script type="text/javascript">
    $(document).ready(function(){
        $('div.parent').delegate('div.child','click',function(){
            $('div').css({'color':'teal', 'font-size':'x-large'});
        });
        $('button').click(function(){
            $('div.parent').undelegate()
        });
    });
  </script>
</html>

Output:

jQuery mousemove() Method

jQuery trigger() Method

Comments and Discussions!

Load comments ↻