jQuery Event delegate() Method

The jQuery event delegate() method is used to attach one or more event handlers to the specified element that are child elements of the specified elements, and speicify a function to run (execute) when an events occur.

In addition, this method delegates event handling to a parent element that listens for events on its child elements specified by a selector.

The delegate() method in jQuery version 3.0 is deprecated, so use on() method in place of the delegate() method.

Syntax

Following is the syntax of the jQuery event delegate() method −

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

Parameters

This method accepts four parameters named 'childSelector', 'event', 'data' and 'function', which are described below −

childSelector − The selector of child elements that will trigger the element.
event − One or more event types such as: 'click' or 'keyup'.
data − An optional data to pass an event handler.
function − A function to run (execute) when the event is triggered.

Return Value

This method does not return any value, but it attaches one or more event handlers to the selected element.

Example 1

The following program demonstrates the usage of the jQuery event delegate() method −

<html>
    <head>
        <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
      <style>
        .demo{
            background-color: aqua;
            width: 250px;
            color: white;
        }
        p{
            width: 250px;
        }
      </style>
    </head>
<body>
    <div class="demo">
        <p>Click me! to change background color</p>
    </div>
    <p>Tutorialspoint</p>
    <script>
        $('div').delegate('p', 'click', function(){
            $('p').css("background-color", "red");
        });
    </script>
</body>
</html>

Output

The above program displayed two messages, once the user clicks on the first (parent) message, the background color of both messages (parent and child) will change to red −

When user clicks on the displayed message (parent) −

Example 2

The following is another example of the jQuery event delegate() method. Here, we use this method with the table element to toggle the class for the td element inside the table when the user clicks −

<html>
    <head>
        <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
      <style>
        .demo{
            background-color: gray;
            color: white;
            text-align: center;
        }
      </style>
    </head>
<body>
    <p>Click on the table data (td) element to toggle class.</p>
    <table>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>Rahul Verma</td>
            <td>rahul123@gmail.com</td>
        </tr>
    </table>
    <script>
        $('table').delegate('td', 'click', function(){
            $(this).toggleClass('demo');
        });
    </script>
</body>
</html>

Output

After executing the above program, it displays a table with some table data, when the user clicks on the table data element, it toggles between the class "demo" −

When the user clicks on the displayed table data, the background will be changed −

Example 3

Working with multiple events

As we discussed jQuery event delegate() method can handle multiple events by specifying them in a space-separated list within the same string −

<html>
    <head>
        <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
      <style>
        .demo{
            background-color: aquamarine;
            width: 200px;
        }
      </style>
    </head>
<body>
    <p>Click, mouseover, or mouseout on the below element to toggle the class.</p>
    <div>
        <p>Hello World</p>
    </div>
    <script>
        $('div').delegate('p', 'click mouseover mouseout', function(){
            $(this).toggleClass('demo');
        });
    </script>
</body>
</html>

Output

The above program displays a message when the user performs the listed events such as: click, mouseover, or mouseout action. During these actions, the .demo class will be added to the element that triggered the event and removed when the event is no longer active −

jquery_ref_events.htm

Print Page