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.
Udacity
Pros
  • 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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

What Delegating Meant

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

Example
$("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:

Example
$("div").on("click", "button", (event) => {
  $(event.delegateTarget)
    .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.

Example
$(document).undelegate();

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.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 22/01/2021
3176 People Used
Only 97 Left
Rating
5.0