JQuery event delegate () Usage

Delegate definition and usage

The delegate () method adds one or more event handlers to the specified element (a child element of the selected element) and specifies the function to run when these events occur.

The event handler using the delegate () method applies to current or future elements (such as new elements created by scripts ).

Parameters	Description
ChildSelector	Required. Specifies one or more child elements of the event handler to be appended.
Event	Required. Specifies one or more events to be appended to an element. Multiple event values are separated by spaces. Must be a valid event.
Data	Optional. Specifies additional data to be passed to the function.
Function	Required. Specifies the function that runs when an event occurs.

Syntax
$ (Selector). delegate (childSelector, event, data, function)

Returned value: jQuery delegate (selector, [type], [data], fn)

Overview

Add one or more event handlers to the specified Element (child element of the selected element) and specify the function to run when these events occur.

Parameters
Selector, [type], fnString, String, Function V1.4.2
Selector: Specifies the selector string used by the filter to trigger events.

Type: one or more events appended to an element. Multiple event values are separated by spaces. Must be a valid event.

Fn: the function that runs when an event occurs.

Selector, [type], [data], fnString, String, Object, Function V1.4.2
Selector: Specifies the selector string used by the filter to trigger events.

Type: one or more events appended to an element. Multiple event values are separated by spaces. Must be a valid event.

Data: additional data passed to the Function

Fn: the function that runs when an event occurs.

Selector, eventsString, String V1.4.3
Selector: Specifies the selector string used by the filter to trigger events.

Events: one or more event-type string and function data ing to execute them.

Example
Description:
When you click the mouse, the p element is hidden or displayed:

HTML code:Copy codeThe Code is as follows: <div style = "background-color: red">
<P> This is a paragraph. </P>
<Button> click here </button>
</Div>

JQuery code:Copy codeThe Code is as follows: $ ("div"). delegate ("button", "click", function (){
$ ("P"). slideToggle ();
});

Description: The delegate method can be used as an alternative to the live () method, so that each event is bound to a specific DOM element.
The following two pieces of code are equivalent:Copy codeThe Code is as follows: $ ("table"). delegate ("td", "hover", function () {$ (this). toggleClass ("hover ");
}); $ ("Table "). each (function () {$ ("td", this ). live ("hover", function () {$ (this ). toggleClass ("hover ");});
});