jQuery | delegate() Method

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>   

chevron_right


Output:
Before Click on the element:

After Click on the element:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>   

chevron_right


Output:
Before Click on the button:

After Click on the button:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.