Open In App

jQuery delegate() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

jQuery delegate() Method in jQuery is used to add one or more event handlers to the specified element that are children of selected elements and is also used to specify a function to run whenever the event occurs.

Syntax:

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

Parameters:

This method accepts four parameters as mentioned above and described below:

  • childSelector: It is a required parameter and is used to specify one or more child elements attached to the event handler.
  • event: It is a required parameter and is used to specify one or more events attached to the elements. Multiple event values are separated by space and it must be a valid event.
  • data: It is an optional parameter and is used to specify the additional data to pass along the function.
  • function: It is a required parameter and is used to specify the function to run when the event occurs.

Example 1:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        delegate() Method in jQuery
    </title>
 
    <script src=
    </script>
 
    <!-- jQuery script to add events -->
    <script>
        $(document).ready(function () {
            $("div").delegate("h3", "click", function () {
                $("h3").css("background-color", "green");
            });
        });
    </script>
</head>
 
<body>
    <center>
        <h1>Welcome to GeeksforGeeks!</h1>
 
        <p>
            Click on the below element (lightgreen
            background) to change background-color
        </p>
 
        <div style="background-color:lightgreen;">
            <h3>GeeksForGeeks</h3>
        </div>
 
        <h3>GeeksForGeeks.</h3>
    </center>
</body>
 
</html>


Output:

jquery-67

Example 2:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        delegate() Method in jQuery
    </title>
 
    <script src=
    </script>
 
    <!-- jQuery script for delegate() method -->
    <script>
        $(document).ready(function () {
            $("div").delegate("h3", "click", function () {
                $(this).slideToggle();
            });
 
            $("button").click(function () {
                $("<h3>This show how the delegate Method"
                    + " works .</h3>").insertAfter("button");
            });
        });
    </script>
</head>
 
<body>
    <center>
        <h1>Welcome to GeeksforGeeks!.</h1>
 
        <div style="background-color:green">
 
            <h3>GeeksforGeeks.</h3>
            <h3>The delegate Method.</h3>
 
            <button>Click</button>
        </div>
    </center>
</body>
 
</html>


Output:

jquery-68



Last Updated : 11 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads