Description: 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, handler )
version added: 1.4.2
selector
A selector to filter the elements that trigger the event.
eventType
A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.
handler
A function to execute at the time the event is triggered.
.delegate( selector, eventType, eventData, handler )
version added: 1.4.2
selector
A selector to filter the elements that trigger the event.
eventType
A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.
eventData
A map of data that will be passed to the event handler.
handler
A function to execute at the time the event is triggered.
Delegate is an alternative to using the .live() method, allowing for each binding of event delegation to specific DOM elements. For example the following delegate code:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
Is equivalent to the following code written using .live():
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
See also the .undelegate() method for a way of removing event handlers added in .delegate().
Examples
Example 1
Click a paragraph to add another. Note that .delegate() binds the click event to all paragraphs - even new ones.$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
Example 1 - Full source:
Click a paragraph to add another. Note that .delegate() binds the click event to all paragraphs - even new ones.
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
});
</script>
</head>
<body>
<p>Click me!</p>
<span></span>
</body>
</html>
Example 2
To display each paragraph's text in an alert box whenever it is clicked:
$("body").delegate("p", "click", function(){
alert( $(this).text() );
});
Example 3
To cancel a default action and prevent it from bubbling up, return false:
$("body").delegate("a", "click", function() { return false; })
Example 4
To cancel only the default action by using the preventDefault method.
$("body").delegate("a", "click", function(event){
event.preventDefault();
});
Example 5
Can bind custom events too.Example 5 - Full source:
Can bind custom events too.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("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");
});
});
</script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
</body>
</html>
Was this information helpful?
