JQuery中綁定事件（bind()）和移除事件（unbind()）
有時候事件執(zhí)行完了，想取消事件的效果可以通過一定的辦法來處理。比如bind()（綁定事件）和unbind()（移除通過bind()方法添加的事件）方法來移除事件的效果。
比如下面的一個案例：
<script type="text/javascript">
$(function(){
$('#btn').bind("click", function(){
$('#test').append("<p>綁定函數(shù)1</p>");
}).bind("click", function(){
$('#test').append("<p>綁定函數(shù)2</p>");
}).bind("click", function(){
$('#test').append("<p>綁定函數(shù)3</p>");
});
})
</script>
html部分：
<body>
<button id="btn">Click Me</button>
<div id="test"></div>
</body>
當(dāng)點(diǎn)擊按鈕btn時，觸發(fā)了三個點(diǎn)擊事件，這里的append()方法，向div層中傳遞了三個段落內(nèi)容。
append() 方法在被選元素的結(jié)尾（仍然在內(nèi)部）追加指定內(nèi)容。它與html()方法還是不同的，html()方法是改變整個元素中的內(nèi)容，而不是向元素結(jié)尾追加內(nèi)容。text()方法與html()方法類似，但區(qū)別在于html()方法中可以寫入html的代碼，而且可以被正確的解析，而text()只能當(dāng)html代碼為正常的字符串。
這里每次點(diǎn)擊，都會執(zhí)行一次事件，想div層末尾添加段落。下面的代碼是取消事件效果的，可以通過刪除事件，使點(diǎn)擊效果失效：
<script type="text/javascript">
$(function(){
$('#btn').bind("click", function(){
$('#test').append("<p>綁定函數(shù)1</p>");
}).bind("click", function(){
$('#test').append("<p>綁定函數(shù)2</p>");
}).bind("click", function(){
$('#test').append("<p>綁定函數(shù)3</p>");
});
$('#delAll').click(function(){
$('#btn').unbind("click");
});
})
</script>
$('#btn').unbind("click");這句代碼的作用就是取消元素btn下的click事件。它不僅僅對于bind()方法有效，它對于click()方法同樣有效。從某種角度上講，bind("click",function(){})與click(function(){})是等價的。
還可以針對具體的方法，刪除特定的事件。下面的代碼可以參考：
<script type="text/javascript">
$(function(){
$('#btn').bind("click", myFun1 = function(){
$('#test').append("<p>綁定函數(shù)1</p>");
}).bind("click", myFun2 = function(){
$('#test').append("<p>綁定函數(shù)2</p>");
}).bind("click", myFun3 = function(){
$('#test').append("<p>綁定函數(shù)3</p>");
});
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);
});
})
</script>
unbind()方法的第二個參數(shù)是事件對應(yīng)得執(zhí)行函數(shù)的名字，這樣執(zhí)行完后，只有myFun2這個事件被刪除了，其他兩個click事件正常執(zhí)行。
還有一種跟bind()方法類似的方法one()，區(qū)別大概就是one()方法只執(zhí)行一次。為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數(shù)。代碼如下：
<script type="text/javascript">
$(function(){
$('#btn').one("click", function(){
$('#test').append("<p>綁定函數(shù)1</p>");
}).one("click", function(){
$('#test').append("<p>綁定函數(shù)2</p>");
}).one("click", function(){
$('#test').append("<p>綁定函數(shù)3</p>");
});
})
</script>
點(diǎn)擊后，只執(zhí)行一次。再次點(diǎn)擊不會觸發(fā)效果。這就是one方法。
以上所述就是本文的全部內(nèi)容了，希望本文能夠使大家更好的理解jQuery的綁定事件和移除事件，
- jQuery中對未來的元素綁定事件用bind、live or on
- jQuery綁定事件方法及區(qū)別(bind,click,on,live,one)
- jQuery中的on與bind綁定事件區(qū)別實(shí)例詳解
- jQuery中bind(),live(),delegate(),on()綁定事件方法實(shí)例詳解
- jQuery中綁定事件bind() on() live() one()的異同
- 關(guān)于Jquery中的bind(),on()綁定事件方式總結(jié)
- jQuery中的bind綁定事件與文本框改變事件的臨時解決方法
- jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法實(shí)例詳解
- Jquery綁定事件(bind和live的區(qū)別介紹)
- 淺談jquery之on()綁定事件和off()解除綁定事件
- jquery綁定事件 bind和on的用法與區(qū)別分析
相關(guān)文章
基于jQuery的網(wǎng)頁右下角彈出廣告(IE7,firefox)
以前曾寫過一個,不過太麻煩了,呵呵```現(xiàn)在改進(jìn)了一下,其實(shí)很簡單:css定位層一直在右下角,用js控制層的高度增減。2010-08-08
使用element-ui的el-menu導(dǎo)航選中后刷新頁面保持當(dāng)前選中狀態(tài)
這篇文章主要介紹了使用element-ui的el-menu導(dǎo)航選中后刷新頁面保持當(dāng)前選中狀態(tài)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
今天小編就為大家分享一篇解決jQuery使用append添加的元素事件無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
淺談jQuery before和insertBefore的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery before和insertBefore的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
jquery blockUI 遮罩不能消失與不能提交的解決方法
jquery blockUI 遮罩不能消失與不能提交的解決方法，使用jquery blockUI的朋友可以參考下。2011-09-09
這篇文章主要介紹了href下載文件的實(shí)現(xiàn)，主要是根據(jù)id取url并下載,需要的朋友可以參考下2014-05-05
jquery+ajax驗(yàn)證不通過也提交表單問題處理
這篇文章主要介紹了jquery validationEngine中使用ajax驗(yàn)證不通過也提交表單問題處理,需要的朋友可以參考下2014-12-12
jQuery插件FusionWidgets實(shí)現(xiàn)的Bulb圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionWidgets實(shí)現(xiàn)的Bulb圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionWidgets插件結(jié)合swf文件載入xml數(shù)據(jù)實(shí)現(xiàn)Bulb圖效果的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了JQuery與JS里submit()的區(qū)別,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了JS/JQuery顯示或隱藏文本方法,需要的朋友可以參考下2014-02-02