jquery中關(guān)于bind()方法的使用技巧分享
.bind()方法可使用.on()方法來(lái)代替
on()
方法提高代碼易讀性,如下
$("input").bind("click", { foo: "hello" }, handler); $("input").on("click", { foo: "hello" }, handler);
bind()
綁定事件的時(shí)候,這些元素必須已經(jīng)存在,而on()
可以處理類似于代理這樣的東東,也就是說(shuō)不存在的元素(動(dòng)態(tài)生成的元素也可以處理),如下動(dòng)態(tài)生成的 To do list ,再雙擊刪除,可使用on()
輕松完成,你會(huì)發(fā)現(xiàn),on換成bind是不行的。
<input type="text" id="str"> <button id="btn">添加</button> <h3>To do list</h3> <ul></ul>
$(document).ready(function(){ $('#btn').on('click',function(){ var str = $('#str').val(); $('<li>').text(str).appendTo('ul'); $('#str').val(''); }) //To do list雙擊刪除 $(document).on('dblclick','li',function(){ $(this).remove(); }) });
on()
事件綁定的妙用:我們經(jīng)常要在網(wǎng)頁(yè)里面處理大量的表格,假設(shè)表格有1000行,如果為每個(gè)tr都綁定一個(gè)click事件是非常占用內(nèi)存的,而更加優(yōu)雅的方法是:使用父元素tbody作事件代理,只需綁定一次,子孫元素tr上發(fā)生的事件會(huì)冒泡到tbody進(jìn)行處理,節(jié)省開(kāi)銷
//效率低下的寫(xiě)法 $( "#dataTable tbody tr" ).on( "click", function() { \…… //換成優(yōu)雅高效滴 $( "#dataTable tbody" ).on( "click", "tr", function() { \……
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
jquery eval解析JSON中的注意點(diǎn)介紹
在JS中將JSON的字符串解析成JSON數(shù)據(jù)格式,一般有兩種方式:使用eval()函數(shù)、使用Function對(duì)象來(lái)進(jìn)行返回解析,下面有個(gè)示例,感興趣的朋友可以參考下2013-08-08Jquery操作下拉框(DropDownList)實(shí)現(xiàn)取值賦值
Jquery操作下拉框(DropDownList)想必大家都有所接觸吧,下面與大家分享下對(duì)DropDownList進(jìn)行取值賦值的實(shí)現(xiàn)代碼2013-08-08jquery圖片延遲加載 前端開(kāi)發(fā)技能必備系列
在網(wǎng)上經(jīng)常會(huì)看到一些很長(zhǎng)的網(wǎng)頁(yè)會(huì)延遲加載其中的圖片,我認(rèn)為這是一種按需分配的做法,網(wǎng)頁(yè)只為那些想繼續(xù)瀏覽網(wǎng)頁(yè)的人加載后面的圖片,在不影響用戶體驗(yàn)的前提下,最大程度地減少服務(wù)器負(fù)擔(dān)和流量2012-06-06將jquery.qqFace.js表情轉(zhuǎn)換成微信的字符碼
這篇文章主要介紹了將jquery.qqFace.js表情轉(zhuǎn)換成微信的字符碼的方法,以及jquery.qqface.js的使用方法,需要的朋友可以參考下2017-12-12jQuery插件實(shí)現(xiàn)屏蔽單個(gè)元素使用戶無(wú)法點(diǎn)擊
屏蔽單個(gè)元素使用戶無(wú)法點(diǎn)擊在某些特殊的情況下還是蠻有用的,例如及不舉了,感興趣的朋友可以參考下,希望可以幫助到你2013-04-04jQuery實(shí)現(xiàn)控制文字內(nèi)容溢出用省略號(hào)(…)表示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)控制文字內(nèi)容溢出用省略號(hào)(…)表示的方法,涉及jQuery針對(duì)字符串及樣式操作相關(guān)技巧,需要的朋友可以參考下2016-02-02讓新消息在網(wǎng)頁(yè)標(biāo)題閃爍提示的jQuery代碼
可能有一些站長(zhǎng)會(huì)注意到這樣的效果,到收到的新消息會(huì)閃爍標(biāo)題提示,那么新消息在網(wǎng)頁(yè)標(biāo)題閃爍顯示的效果如何實(shí)現(xiàn),下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-11-11詳解jQuery的animate動(dòng)畫(huà)方法及動(dòng)畫(huà)排隊(duì)問(wèn)題解決
這篇文章主要介紹了jQuery的animate動(dòng)畫(huà)方法及動(dòng)畫(huà)排隊(duì)問(wèn)題解決的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用jQuery,感興趣的朋友可以了解下2021-05-05