jQuery事件多次綁定與解綁問(wèn)題實(shí)例分析
本文實(shí)例分析了jQuery事件多次綁定與解綁問(wèn)題。分享給大家供大家參考,具體如下:
jQuery事件綁定很常見(jiàn),相信大家經(jīng)常會(huì)用到click、focus、blur等事件,但是如果對(duì)控件的某個(gè)事件綁定多個(gè)方法會(huì)是怎樣的結(jié)果呢,覆蓋、累加、或其他效果?今天我就來(lái)驗(yàn)證一下這個(gè)疑問(wèn)并說(shuō)說(shuō)如何解綁。
一、jQuery事件多次綁定
<head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //第二次綁定 $("#btnAdd").click(function () { alert("bind click1"); }); //第三次綁定 $("#btnAdd").on("click", function () { alert("bind click2"); }); //第四次綁定 $("#btnAdd").bind("click", function () { alert("bind click3"); }); }); function add1() { alert("add1()"); } </script> </head> <body> <h2>UserController->Index</h2> <!--第一次綁定--> <input type="button" id="btnAdd" name="btnAdd" value="Add" onclick="add1()" /> </body>
驗(yàn)證結(jié)果:對(duì)控件的某個(gè)事件進(jìn)行多次綁定效果會(huì)疊加,截圖如下:
二、jQuery事件解綁
既然能綁定事件,那應(yīng)該也能對(duì)事件解綁,下面展示解綁的方法:
<head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#btnAdd").click(function () { alert("bind click1"); }); $("#btnAdd").on("click", add2); $("#btnAdd").bind("click", add3); }); function add1() { alert("add1()"); } function add2() { alert("bind click2"); } function add3() { alert("bind click3"); } function cancelBind() { //不指定方法名則解綁click事件對(duì)應(yīng)的所有方法,標(biāo)簽內(nèi)onclick設(shè)置的方法仍會(huì)執(zhí)行 //$("#btnAdd").off("click"); //$("#btnAdd").unbind("click"); //解綁click事件對(duì)應(yīng)的add2方法 $("#btnAdd").off("click", add2); //$("#btnAdd").unbind("click", add3); } </script> </head> <body> <h2>UserController->CancelBind</h2> <input type="button" id="btnAdd" name="btnAdd" value="Add" onclick="add1()" /> <input type="button" id="btnCancelBind" name="btnCancelBind" value="CancelBind" onclick="cancelBind()" /> </body>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 淺談jQuery的bind和unbind事件(綁定和解綁事件)
- jquery事件綁定解綁機(jī)制源碼解析
- JQuery給元素綁定click事件多次執(zhí)行的解決方法
- jQuery 通過(guò)事件委派一次綁定多種事件,以減少事件冗余
- 淺析jQuery事件之on()方法綁定多個(gè)選擇器,多個(gè)事件
- jQuery使用bind函數(shù)實(shí)現(xiàn)綁定多個(gè)事件的方法
- Jquery on方法綁定事件后執(zhí)行多次的解決方法
- jQuery綁定事件-多種實(shí)現(xiàn)方式總結(jié)
- jQuery移除元素自動(dòng)解綁事件實(shí)現(xiàn)思路及代碼
相關(guān)文章
10個(gè)基于jQuery或JavaScript的WYSIWYG 編輯器整理
10驚人的自由豐富的文本編輯器,將提升您的網(wǎng)站的功能。我已經(jīng)收集了5 jQuery和5個(gè)非jQuery實(shí)時(shí)評(píng)價(jià)附帶簡(jiǎn)單的功能,具有辦公一樣的功能。2010-05-05Jquery 實(shí)現(xiàn)表格顏色交替變化鼠標(biāo)移過(guò)顏色變化實(shí)例
Jquery 實(shí)現(xiàn)表格顏色交替變化,點(diǎn)擊選中行,鼠標(biāo)移過(guò)顏色變化效果附演示代碼 ,喜歡的朋友可以參考下2013-08-08jquery實(shí)現(xiàn)按Enter鍵觸發(fā)事件示例
按Enter鍵觸發(fā)事件比如提交等等,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-09-09jQuery.extend 函數(shù)的詳細(xì)用法
jQuery.extend 函數(shù)的詳細(xì)用法,學(xué)習(xí)jquery的朋友可以參考下2012-06-06cnblogs TagCloud基于jquery的實(shí)現(xiàn)代碼
自創(chuàng)"山寨版"的"博客園"TagCloud!...2010-06-06jquery ui resize 中border-box的bug修正
本文給大家分享的是jQuery ui resize中的一個(gè)樣式的小bug的解決方法,官方并沒(méi)有修復(fù),這里推薦給大家,有需要的小伙伴可以參考下。2015-04-04