jQuery Event undelegate() Method

The jQuery event undelegate() method is used to remove one or more event handlers from elements, especially those that were previously added using the delegate() method.

The undelegate() method was deprecated in jQuery version 3.0. You can use the off() method instead.

Syntax

Following is the syntax of the jQuery event undelegate() method −

$(selector).undelegate(childSelector, event, handler)

Parameters

This method accepts three parameters named 'childSelector', 'event', and 'handler', which are described below −

childSelector (optional) − The selector of the child elements from which the event handlers are to be removed.
event (optional) − It Specifies one or more event types separated by spaces to remove from the selected elements.
handler (optional) − The specific event handler function to remove.

Return Value

This method does not have any return value.

Example 1

The following is the basic example of the jQuery event undelegate() method −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on the Remove button event handler from <p> element.</p>
    <button>Remove</button>
    <script>
        $('body').delegate("p", "click", function(){
            alert("Event handler added to click event");
        });
        $('button').click(function(){
            $('body').undelegate("p", "click");
            alert("Removed....!");
        })
    </script>
</body>
</html>

Output

The above program displayed a <p> element and a button, when the user clicked on the "p" element an event handler was added to the click event, and when the user clicked the button an event handler was removed from the <p> element −

Example 2

Remove all event handlers from the elements.

Here is another example of the jQuery undelegate() method, which is used to remove all event handlers previously added to the selected elements −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            width: 300px;
            background-color: green;
            padding: 10px;
            color: white;
        }
    </style>
</head>
<body>
    <h1>This is h1 heading (mouseenter event)</h1>
    <p>This is paragraph (click event)</p>
    <div>Hello TP (mouseout event)</div><br>
    <button>Remove all</button><span></span>
    <script>
        $('body').delegate("h1", "mouseenter", function(){
            $(this).css("color", "green");
        });
        $('body').delegate("p", "click", function(){
            $(this).css("color", "red");
        });
        $('body').delegate("div", "mouseout", function(){
           alert("Mouseout from div element");
        });
        $('button').click(function(){
            $('body').undelegate();
            $('span').text("Removed....!");
        })
    </script>
</body>
</html>

Output

After executing the above program, an <h1>, <p>, <div>, and a button element will be displayed. We have added an event handler to these elements (except the button) using the delegate() method. When the button is clicked, all event handlers will be removed −

Example 3

Removing a Specific Event Handler Function −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        p{
            width: 200px;
            padding: 10px;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <p>Click me to say Hello.!!</p>
    <button>Remove event handler</button>
    <script>
        var myHandler = function(){
            alert("Hello.!!");
        }
        $('body').delegate("p", "click", myHandler);
        $('button').click(function(){
            $('body').undelegate("p", "click");
            alert("Removed.!!");
        })
    </script>
</body>
</html>

Output

Once the program is executed, a message and a button will be displayed. When the user clicks on the message, a specific event handler will be added to the click event, triggering a pop-up alert. Subsequently, when the button is clicked, the event handler will be removed −

jquery_ref_events.htm

Print Page