.delegate()
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
.delegate(selector, eventType, function(eventObjectEvent))🡢 jQuery
selector
| String | A selector to filter the elements that trigger the event. |
eventType
| String | A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names. |
function(eventObjectEvent)
| Function | A function to execute at the time the event is triggered. |
.delegate(selector, eventType, eventData, function(eventObjectEvent))🡢 jQuery
selector
| String | A selector to filter the elements that trigger the event. |
eventType
| String | A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names. |
eventData
| Anything | An object containing data that will be passed to the event handler. |
function(eventObjectEvent)
| Function | A function to execute at the time the event is triggered. |
.delegate(selector, events)🡢 jQuery
selector
| String | A selector to filter the elements that trigger the event. |
events
| PlainObject | A plain object of one or more event types and functions to execute for them. |
As of jQuery 3.0, .delegate() has been deprecated. It was superseded by the .on() method since jQuery 1.7, so its use was already discouraged. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:
// jQuery 1.4.3+
$(elements).delegate(selector, events, data, handler);
// jQuery 1.7+
$(elements).on(events, selector, data, handler);
For example, the following .delegate() code:
$("table").delegate("td", "click", function () {
$(this).toggleClass("chosen");
});
is equivalent to the following code written using .on():
$("table").on("click", "td", function () {
$(this).toggleClass("chosen");
});
To remove events attached with delegate(), see the .undelegate() method.
Passing and handling event data works the same way as it does for .on().
Click a paragraph to add another. Note that .delegate() attaches a click event handler to all paragraphs - even new ones.
JS
<p>Click me!</p>
<span></span>
CSS
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
HTML
$("body").delegate("p", "click", function () {
$(this).after("<p>Another paragraph!</p>");
});
DEMO
To display each paragraph's text in an alert box whenever it is clicked:
HTML
$("body").delegate("p", "click", function () {
alert($(this).text());
});
DEMO
To cancel a default action and prevent it from bubbling up, return false:
HTML
$("body").delegate("a", "click", function () {
return false;
});
DEMO
To cancel only the default action by using the preventDefault method.
HTML
$("body").delegate("a", "click", function (event) {
event.preventDefault();
});
DEMO
Can bind custom events too.
JS
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display: none"></span>
CSS
p {
color: red;
}
span {
color: blue;
}
HTML
$("body").delegate("p", "myCustomEvent", function (e, myName, myValue) {
$(this).text("Hi there!");
$("span")
.stop()
.css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30)
.fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
DEMO