How to use the jQuery.delegate() function?

2 years ago
Noah Thompson
1 minute

The jQuery.delegate() function is used to dynamically bind event handlers to current or future elements.

The usage instructions are as follows:

  1. Basic grammar.
$(selector).delegate(childSelector, eventType, function)
  1. Selector: Represents the parent element to which the event will be bound.
  2. childSelector: A selector that specifies the child element where the event will be bound.
  3. eventType: a string that represents the type of event to be bound, such as “click” or “mouseover”.
  4. function: callback function, which represents an event handler.
  1. Sample code:
$(document).delegate("button", "click", function(){
  // 在点击button元素时触发的事件处理程序
  $(this).text("Clicked");
});

The above code binds a click event handler to all button elements in the document, so that when a button is clicked, the event handler is triggered and changes its text to “Clicked”.

  1. Important points to note:
  1. It is recommended to use the .on() function instead of the .delegate() function in versions of jQuery after 3.0.
  2. It is not recommended to use the .delegate() function if the .on() function has already been used.
  3. If the selector matches multiple elements, each in different parents, the event handler will trigger on all matching children.

For more information on the jQuery.delegate() function, please refer to the official documentation: jQuery.delegate()

bannerAds