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.

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.