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

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.

Pros

• 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

GET 25% OFF

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

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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) => {
  $(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.

$(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.