🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

Understand How jQuery .delegate() & .undelegate() Methods Were Used

Reading time 2 min
Published Jan 11, 2018
Updated Oct 2, 2019

jQuery delegate: Main Tips

  • The jQuery .delegate() method added one or multiple event handlers to elements, matching specified selector.
  • jQuery .undelegate() removed handlers added using the delegate() method.
  • The event.delegateTarget property returned the element to which the event handler was attached.
  • These methods were deprecated in the 3.0 version of jQuery, released in 2016.
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

What Delegating Meant

The .delegate() jQuery method attached event handlers to elements and their children (current and forthcoming).

$("div").delegate("p", "click", () => {
    $("p").css("background-color", "red");

The following code shows syntax of jQuery .delegate():

$("selector").delegate(selector, event, data, function);

It took four parameters:

  • selector - a selector to specify which elements should be affected.
  • event - a standard JavaScript event or a custom jQuery.event object.
  • data - additional data to pass to the handler function.
  • function - the handler function to attach and run when the specified event was triggered.

To return the element to which the event handler was attached, event.delegateTarget was used:

$("div").on("click", "button", (event) => {
    .css("border-radius", "150px")
    .css("backgroundColor", "red");

Note: the .delegate() jQuery method has been deprecated since version 3.0. Use .on() instead.

Undelegating Explained

The jQuery .undelegate() method removed event handlers added using the .delegate() method.


It followed this syntax:

$("selector").undelegate(selector, event, function);

The method took three arguments:

  • selector filtered the event results.
  • event named a standard JavaScript event type or a custom jQuery.event object.
  • function defined a specific handler function to remove (if not specified, all handlers for the particular event were removed).

Note: the jQuery .undelegate() method has become deprecated in version 3.0. Use .off() method instead.