jQuery Event Delegation and UnDelegation

jQuery Event Delegation and Undelegation with Examples

In this article, I am going to discuss jQuery Event Delegation and Undelegation with Examples. Please read our previous article, where we discussed How to Add Event Handlers to Dynamically Created Elements in jQuery. At the end of this article, you will understand everything about jQuery Event Delegation and Un Delegation.

jQuery Event Delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. Actually, in the previous article, we have used event delegation. In this example, we have used the event delegation by the on() method.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: Arial, Helvetica, sans-serif;
      }
      h1 {
        font-size: 40px;
        margin-bottom: 30px;
        padding: 30px;
        text-align: center;
        text-transform: capitalize;
        font-style: italic;
      }
      p {
        margin: 20px auto;
        font-weight: bold;
        font-size: 30px;
        text-align: center;
        font-style: oblique;
        width: 100%;
        padding: 20px;
        border-radius: 30px;
        background-color: rgb(255, 164, 164);
        cursor: pointer;
      }
      button {
        background-color: #1c4450;
        border: none;
        color: white;
        padding: 20px 35px;
        text-align: center;
        text-decoration: none;
        outline: none;
        display: inline-block;
        font-size: 20px;
        border-radius: 10px;
        cursor: pointer;
        transition-duration: 0.4s;
      }
    </style>
  </head>
  <body>
    <h1> jQuery event delegation </h1>
    <div class="container">
      <p>This is a dummy paragraph</p>
      <p>This is a dummy paragraph</p>
      <p>This is a dummy paragraph</p>
      <p>This is a dummy paragraph</p>
    </div>
    <button id="btn">Add a new paragraph element</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".container").on("click", "p", function () {
          $(this).fadeOut(500);
        });

        $("#btn").on("click", function () {
          $(".container").append("<p>New Paragraph</p>");
        });
      });
    </script>
  </body>
</html>

Now run the above code and you will get the following output.

Now click on the Add a new paragraph element button to add new paragraphs as shown in the below image. I have clicked two times, so two new paragraphs are added as shown below.

Now click on each paragraph (existing plus newly added paragraphs) and you will see that all the paragraphs are faded away as shown in the below image.

So let us understand once again how does this work:

When you click on a , the event gets bubbled up to its parent (div.container) as the does not have an event handler
The bubbled event is handled by the parent element, as it has a click event handler.
When a new is added dynamically, you don’t have to add the click event handler to it. Since the newly created is added to the same parent element (div.container), the click event of this also gets bubbled up to the same parent and will be handled by it.

Now jQuery provides another method to perform event delegation i.e. delegate() method.

jQuery Delegate() Method:

The delegate() method attaches one or more event handlers for specified elements that are children of selected elements and specifies a function to run when the events occur. Event handlers attached using the delegate() method will work for both current and FUTURE elements (like a new element created by a script).

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

Notice that, parameters of the delegate() method are the same as the on() method but the difference is in order. In the delegate() method, the child selector comes first as a parameter then the type of the event. Now let’s look at how to achieve the previous functionality using the delegate() method.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: Arial, Helvetica, sans-serif;
      }
      h1 {
        font-size: 40px;
        margin-bottom: 30px;
        padding: 30px;
        text-align: center;
        text-transform: capitalize;
        font-style: italic;
      }
      p {
        margin: 20px auto;
        font-weight: bold;
        font-size: 30px;
        text-align: center;
        font-style: oblique;
        width: 100%;
        padding: 20px;
        border-radius: 30px;
        background-color: rgb(255, 164, 164);
        cursor: pointer;
      }
      button {
        background-color: #1c4450;
        border: none;
        color: white;
        padding: 20px 35px;
        text-align: center;
        text-decoration: none;
        outline: none;
        display: inline-block;
        font-size: 20px;
        border-radius: 10px;
        cursor: pointer;
        transition-duration: 0.4s;
      }
    </style>
  </head>
  <body>
    <h1> jQuery event delegation </h1>
    <div class="container">
      <p>This is a dummy paragraph</p>
      <p>This is a dummy paragraph</p>
      <p>This is a dummy paragraph</p>
      <p>This is a dummy paragraph</p>
    </div>
    <button id="btn">Add a new paragraph element</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".container").delegate("p", "click", function () {
          $(this).fadeOut(500);
        });

        $("#btn").on("click", function () {
          $(".container").append("<p>New Paragraph</p>");
        });
      });
    </script>
  </body>
</html>

Notice that we have used delegate() method instead of the on() method. If you are using jquery version 1.7 or above then jQuery recommends using the on() method over the delegate method. This is working exactly in the same manner as the previous example.

jQuery Event Undelegation

jQuery event undelegation is used to detach any event from a set of selected elements. This can be done by using the off() or the undelegate() method

jQuery undelegate() method:

The undelegate() method removes one or more event handlers, added with the delegate() method.

Syntax: $(selector).undelegate(childSelector, event, function)

Notice that, the order of the parameters is the reverse of that of the off() method. In the off() method, you know that type of event comes first and then the selector.

Example: jQuery Event Undelegation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: Arial, Helvetica, sans-serif;
      }
      h1 {
        font-size: 40px;
        margin-bottom: 30px;
        padding: 30px;
        text-align: center;
        text-transform: capitalize;
        font-style: italic;
      }
      p {
        margin: 20px auto;
        font-weight: bold;
        font-size: 30px;
        text-align: center;
        font-style: oblique;
        width: 100%;
        padding: 20px;
        border-radius: 30px;
        background-color: rgb(255, 164, 164);
        cursor: pointer;
      }
      button {
        background-color: #1c4450;
        border: none;
        color: white;
        padding: 15px 20px;
        text-align: center;
        text-decoration: none;
        outline: none;
        display: inline-block;
        font-size: 20px;
        border-radius: 10px;
        cursor: pointer;
        transition-duration: 0.4s;
      }
    </style>
  </head>
  <body>
    <h1>jQuery event delegation</h1>
    <div class="container">
      <p>This is a dummy paragraph</p>
      <p>This is a dummy paragraph</p>
      <p>This is a dummy paragraph</p>
      <p>This is a dummy paragraph</p>
    </div>
    <div>
      <button id="btnadd">Add a new paragraph element</button>
      <button id="undelegate">Undelegate</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".container").delegate("p", "click", function () {
          $(this).fadeOut(500);
        });

        $("#btnadd").on("click", function () {
          $(".container").append("<p>New Paragraph</p>");
        });
        $("#undelegate").click(function () {
          $(".container").off("click", "p");
        });
      });
    </script>
  </body>
</html>

Notice that here we are removing the click event handler from the elements of the container. Here we are using the off() method to achieve that. Now run the above code and click on the Add a new paragraph element button to add new paragraphs as shown in the below image.

Now click on the Paragraphs and you will see that the paragraphs are fading out as shown in the below image.

Now click on the undelegate button. Once you click on the undelegated button, then click on the paragraph items and you will see that nothing is happening. That event handler is removed now. This is called the event undelegation. This can also be done with the undelegate method. Modify the script section as shown below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $(".container").delegate("p", "click", function () {
      $(this).fadeOut(500);
    });

    $("#btnadd").on("click", function () {
      $(".container").append("<p>New Paragraph</p>");
    });
    $("#undelegate").click(function () {
      $(".container").undelegate("p", "click");
    });
  });
</script>

Here we are using the undelegate method but look at the order of the parameters. Here the child selector “p” comes first. Then the type of the event. The output is going to be exactly the same.

In the next article, I am going to discuss Event Delegation using jQuery Live Function with Examples. Here, in this article, I try to explain jQuery Event Delegation and Undelegation with Examples and I hope you enjoy this jQuery Event Delegation and Undelegation article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.