返回值:jQuerydelegate(selector, eventType, handler)
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.
-
1.4.2 新增delegate(selector, eventType, handler)
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.handler (Function) 每当事件触发时执行的函数。 -
1.4.2 新增delegate(selector, eventType, eventData, handler)
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 (Object) 将要传递给事件处理函数的数据映射。handler (Function) 每当事件触发时执行的函数。
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().
Passing and handling event data works the same way as it does for .bind().
示例:
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="jquery.min.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
</script>
</body>
</html>演示:
示例:
To display each paragraph's text in an alert box whenever it is clicked:
jQuery 代码:
$("body").delegate("p", "click", function(){
alert( $(this).text() );
});示例:
To cancel a default action and prevent it from bubbling up, return false:
jQuery 代码:
$("body").delegate("a", "click", function() { return false; })示例:
To cancel only the default action by using the preventDefault method.
jQuery 代码:
$("body").delegate("a", "click", function(event){
event.preventDefault();
});示例:
Can bind custom events too.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$("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>
</body>
</html>