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:
<!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:
Before Click on the element:
After Click on the element:
Example 2:
<!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:
Before Click on the button:
After Click on the button:
Please Login to comment...