jQuery中delegate和on的用法與區(qū)別詳細(xì)解析
在jQuery1.7中 .delegate()已被.on()取代。對(duì)于早期版本,它仍然使用事件委托的最有效手段。
在事件綁定和委派,delegate()和on在一般情況下,這兩種方法是等效的。
.delegate() 指定的元素(屬于被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, [selector], data, handler );
例如:.delegate() code:
$("table").delegate("td","click",function(){
alert("hello");
});
.on() code:
$("table").on("click", "td", function() {
alert("hi");
});
PS: 兩者區(qū)別是seleter和events順序不同
delegate和on方法被選元素的子元素必須是"合法的"子元素。比如
$("table").delegate("button","click",function(){...});
$("table").on("click", "p", function(){...});
就不起作用,因?yàn)檎G闆r下,table子元素應(yīng)為tr,td...
on(events,[selector],[data],fn),參數(shù)[selector]是可選,
一個(gè)選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。
例如:
$("table").on("click", ".td1", function() {
alert("hi");
});
過濾class為td1的table子元素
而delegate的selector是必需的。
相關(guān)文章
淺談如何實(shí)現(xiàn)easyui的datebox格式化
這篇文章主要和大家一起聊一聊如何實(shí)現(xiàn)easyui的datebox格式化的方法,感興趣的小伙伴們可以參考一下2016-06-06jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色,比較實(shí)用,也很簡單,使用到了一個(gè)resize事件需要的朋友可以參考下2014-10-10JQuery給select添加/刪除節(jié)點(diǎn)的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫Query給select添加/刪除節(jié)點(diǎn)的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04解析prototype,JQuery中跳出each循環(huán)的方法
這篇文章主要介紹了在prototype,JQuery中跳出each循環(huán)的方法。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12jQuery實(shí)現(xiàn)購物車計(jì)算價(jià)格功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)購物車計(jì)算價(jià)格功能的方法,實(shí)例分析了jQuery針對(duì)html元素的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jQuery 重復(fù)加載錯(cuò)誤以及修復(fù)方法
本文主要記錄了在項(xiàng)目中遇到j(luò)Query重復(fù)加載導(dǎo)致依賴jQuery的js全部失效然后一步步分析,得出最終解決方案的全部過程,主要是記錄下來,提醒自己以后不要再犯相同錯(cuò)誤。2014-12-12jQuery實(shí)現(xiàn)提示密碼強(qiáng)度的代碼
本文給大家介紹的是一個(gè)非常常見的功能,在輸入密碼的時(shí)候提示密碼的強(qiáng)度,本文使用jQuery來實(shí)現(xiàn),有需要的小伙伴可以參考下。2015-07-07