jQuery中delegate()方法的用法詳解
delegate() 方法為指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序,并規(guī)定當這些事件發(fā)生時運行的函數(shù)。下面我們具體來了解一下。
語法結(jié)構(gòu):
代碼如下:
$(selector).delegate(childofselector,type,data,function)
參數(shù)說明:
childSelector 必需。規(guī)定要附加事件處理程序的一個或多個子元素。
event 必需。規(guī)定附加到元素的一個或多個事件。
由空格分隔多個事件值。必須是有效的事件。
data 可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
function 必需。規(guī)定當事件發(fā)生時運行的函數(shù)。
delegate 的函數(shù)是被某一類型的共同父元素調(diào)用,
代碼如下:
listNode.delegate('.condition-remove','click',function(e){ e.preventDefault(); $(this).parents('.search-condition-item').remove(); } );
完整實例
代碼如下:
function renderSearchConditions(selectionId,conditions){var conditionsTemplate = '<div class="search-conditions-list-section">'+ '<ul class="search-conditions-list"></ul>'+ '</div>', listNode = $(conditionsTemplate); listItemTemplate = '<li class="search-condition-item" data-type="{conditonType}"><span>{condition}</span><a class="condition-remove" href="#">x</a></li>'; for(var key in conditions) { var condition = conditions[key].keyword, conditionType = conditions[key].type, listItemNode = $.substitute(listItemTemplate,{conditionType:conditionType,condition:condition}); listNode.append(listItemNode); } $(selectionId).prepend(listNode); listNode.delegate('.condition-remove','click',function(e){ e.preventDefault(); $(this).parents('.search-condition-item').remove(); } ); }
1.綁定的事務(wù)中,獲取事務(wù)源,調(diào)用hide辦法,并傳入事務(wù)源對象:
代碼如下:
$(document).delegate("body", "click", function(e) { var ev = e || window.event; // 事務(wù) //var target = ev.target || ev.srcElement; // 獲得事務(wù)源 hide(ev.target || ev.srcElement, true); } );
底本用的$(window),然則IE8之前的,貌似有bug。
$(document)不好之處,頁面加載完后,會觸發(fā)一次...
2. hide辦法中,斷定該事務(wù)源是否從指定元素中發(fā)出,即事務(wù)源元素是不是指定元素的子元素或者其本身。
代碼如下:
//子元素斷定==== if (!!window.find)HTMLElement.prototype.contains = function(B) { return this.compareDocumentPosition(B) - 19 > 0 }; function hide(dom, isClick) { var nn,t,_isClick = !!isClick; try { for (var n in objList) { nn = objList[n]; t = nn.getOption("target")[0]; if (_isClick && (t == dom || t.contains(dom)))return; if (!_isClick || !nn.box[0].contains(dom)) nn.hide(); } } catch(e) { } }
3.上方的hide辦法中,isClick變量 斷定 是不是點擊事務(wù)觸發(fā)的。以便處理懲罰resize的。resize用settimeout作處理懲罰,降落內(nèi)存消費.
代碼如下:
var reTime = null; $(window).bind("resize", function() { if (reTime) clearTimeout(reTime); reTime = setTimeout(hide, 50); } );
相關(guān)文章
使用jQuery快速解決input中placeholder值在ie中無法支持的問題
本篇文章主要介紹了使用jQuery快速解決input中placeholder值在ie中無法支持的問題。需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01jQuery 淡出一個圖像到另一個圖像的實現(xiàn)代碼
這篇文章主要介紹了jquery的hover事件實現(xiàn)兩個圖片的淡出切換效果,需要的朋友可以參考下2013-06-06jquery和javascript中如何將一元素的內(nèi)容賦給另一元素
將一元素的內(nèi)容賦給另一元素,在某些情況下還是比較實用的,下面為大家講解下jquery和javascript中是如何實現(xiàn)的2014-01-01基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之數(shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之數(shù)據(jù)支持json字符串、list集合的相關(guān)者,小編推薦使用返回list集合的方法,具體原因大家可以根據(jù)本文學習下2016-08-08jQuery getJSON()+.ashx 實現(xiàn)分頁(改進版)
參考了上一篇Asp .net +jquery +.ashx 文件實現(xiàn)分頁并作了改進:ashx返回json數(shù)據(jù),減少傳輸數(shù)據(jù)量,html頁面樣式控制也比較靈活,感興趣的朋友可以參考下哈2013-03-03jquery的clone方法應(yīng)用于textarea和select的bug修復(fù)
textarea和select的值clone的時候會丟掉,在clone的時候?qū)al再重新賦值一下,如果知道這個了就加單了2014-06-06