.delegate()
.delegate( selector, eventType, handler ) 返回： jQuery
描述： 為所有選擇器匹配的元素附加一個處理一個或多個事件，現(xiàn)在或?qū)?，基于一組特定的根元素。
-
version added: 1.4.2.delegate( selector, eventType, handler )
selector選擇器字符串，用于過濾器觸發(fā)事件的元素。
eventType一個包含一個或多個JavaScript事件類型的字符串，比如"click"或"keydown,"或自定義事件的名稱。
handler每當(dāng)事件觸發(fā)時執(zhí)行的函數(shù)。
-
version added: 1.4.2.delegate( selector, eventType, eventData, handler )
selector選擇器字符串，用于過濾觸發(fā)事件的元素。
eventType一個包含一個或多個JavaScript事件類型的字符串，比如"click"或"keydown,"或自定義事件的名稱。
eventData將要傳遞給事件處理函數(shù)的數(shù)據(jù)映射。
handler每當(dāng)事件觸發(fā)時執(zhí)行的函數(shù)。
Delegate（委派）是使用.live()方法的另一個選擇，允許每個事件綁定到特定的DOM元素。例如，下面的委托的代碼：
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
相當(dāng)于下面使用.live()書寫的代碼 ：
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
另見.undelegate() 方法，用于刪除通過.delegate()添加的事件。
注意：
-
自從
.live()方法處理事件一旦傳播到文檔的頂部，live事件是不可能停止傳播的。同樣地，.delegate()事件將始終傳播給其中包含的被委托元素；元素上的事件將在被委托事件被調(diào)用的時候執(zhí)行。
Examples:
Example: 點擊添加另一個段落。請注意， .delegate() 綁定所有段落的click事件 - 甚至是新的段落。
<!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.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>Demo:
Example: 每當(dāng)段落的文字被點擊時候，要顯示一個警告框：
$("body").delegate("p", "click", function(){
alert( $(this).text() );
});Example: 返回false，取消默認的行為，防止從它冒出來的，：
$("body").delegate("a", "click", function() { return false; })Example: 要取消默認動作只有通過使用preventDefault方法。
$("body").delegate("a", "click", function(event){
event.preventDefault();
});Example: 也可以綁定自定義事件。
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>