What is the use of delegate() method in jQuery ?

Last Updated : 29 Mar, 2022

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

The delegate() Method in jQuery is used to add event handlers to the element that are children of selected elements. When the event occurs then the function will be run. This will work for current and future elements (if we want to create some elements later).

Syntax:

$(selector)
  .delegate(childSelector, event, data, function)

Parameters: This function accepts four parameters.

childSelector: This is a required parameter and it is used to specify the children to attach the event handler.
event: This is a required parameter and it is used to specify the events to attach to the elements. If there are multiple event values then they will be separated by space.
data: This is an optional parameter and it is used to pass the extra data using the function.
function: This is a required parameter and it specifies the function to run when the event occurs.

Example: The following code demonstrates the delegate() method in jQuery.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> delegate() Method in jQuery </title>

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

<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        
        <h2>delegate() Method in jQuery</h2>

        <div>
            <h3>
                Click the button to change font size, 
                text color and background color of 
                GeeksforGeeks
            </h3>
            
            <button> Click me </button>
        </div>

        <p>GeeksforGeeks</p>
    </center>

    <script>
        $(document).ready(function() {
            $("div").delegate("button", "click", function() {
                $("p").css("background-color", "grey");
                $("p").css("color", "white");
                $("p").css("font-size", "50px");
            });
        });
    </script>
</body>

</html>