jQuery | delegate() Method - GeeksforGeeks

19 Feb, 2019
The delegate() Method in jQuery is used to add one or more event handlers to the specified element that are children of selected elements and are also used to specify a function to run whenever the event occurs.
Syntax
$(selector).delegate( childSelector, event, data, function )
Parameter: This method accepts four parameters as mentioned above and described below:
childSelector: It is required parameter and used to specify one or more child elements attached to the event handler.
event: It is required parameter and 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 used to specify the additional data to pass along the function.
function: It is required parameter and used to specify the function to run when the event occurs.
Example 1:
<!DOCTYPE html> <html>     <head>         <title>            delegate() Method in jQuery        </title>                   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">        </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:Before Click on the element:After Click on the element:
Example 2:
<!DOCTYPE html> <html>     <head>         <title>            delegate() Method in jQuery        </title>                   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">        </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:Before Click on the button:After Click on the button:
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to change the background color after clicking the button in JavaScript ?
How to Dynamically Add/Remove Table Rows using jQuery ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript