JQuery中綁定事件(bind())和移除事件(unbind())
有時(shí)候事件執(zhí)行完了,想取消事件的效果可以通過一定的辦法來處理。比如bind()(綁定事件)和unbind()(移除通過bind()方法添加的事件)方法來移除事件的效果。
比如下面的一個(gè)案例:
<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時(shí),觸發(fā)了三個(gè)點(diǎn)擊事件,這里的append()方法,向div層中傳遞了三個(gè)段落內(nèi)容。
append() 方法在被選元素的結(jié)尾(仍然在內(nèi)部)追加指定內(nèi)容。它與html()方法還是不同的,html()方法是改變整個(gè)元素中的內(nèi)容,而不是向元素結(jié)尾追加內(nèi)容。text()方法與html()方法類似,但區(qū)別在于html()方法中可以寫入html的代碼,而且可以被正確的解析,而text()只能當(dāng)html代碼為正常的字符串。
這里每次點(diǎn)擊,都會(huì)執(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事件。它不僅僅對(duì)于bind()方法有效,它對(duì)于click()方法同樣有效。從某種角度上講,bind("click",function(){})與click(function(){})是等價(jià)的。
還可以針對(duì)具體的方法,刪除特定的事件。下面的代碼可以參考:
<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()方法的第二個(gè)參數(shù)是事件對(duì)應(yīng)得執(zhí)行函數(shù)的名字,這樣執(zhí)行完后,只有myFun2這個(gè)事件被刪除了,其他兩個(gè)click事件正常執(zhí)行。
還有一種跟bind()方法類似的方法one(),區(qū)別大概就是one()方法只執(zhí)行一次。為每一個(gè)匹配元素的特定事件(像click)綁定一個(gè)一次性的事件處理函數(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)擊不會(huì)觸發(fā)效果。這就是one方法。
以上所述就是本文的全部?jī)?nèi)容了,希望本文能夠使大家更好的理解jQuery的綁定事件和移除事件,
- jQuery中對(duì)未來的元素綁定事件用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綁定事件與文本框改變事件的臨時(shí)解決方法
- jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法實(shí)例詳解
- Jquery綁定事件(bind和live的區(qū)別介紹)
- 淺談jquery之on()綁定事件和off()解除綁定事件
- jquery綁定事件 bind和on的用法與區(qū)別分析
相關(guān)文章
ThinkPHP+jquery實(shí)現(xiàn)“加載更多”功能代碼
本篇文章主要介紹了ThinkPHP+jquery實(shí)現(xiàn)“加載更多”功能代碼,以實(shí)例代碼講訴了加載更多的代碼實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-03-03jquery操作ID帶有變量的節(jié)點(diǎn)實(shí)例
下面小編就為大家?guī)硪黄猨query操作ID帶有變量的節(jié)點(diǎn)實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12jquery ui resize 中border-box的bug修正
本文給大家分享的是jQuery ui resize中的一個(gè)樣式的小bug的解決方法,官方并沒有修復(fù),這里推薦給大家,有需要的小伙伴可以參考下。2015-04-04使用jQuery Ajax 請(qǐng)求webservice來實(shí)現(xiàn)更簡(jiǎn)練的Ajax
以往我們?cè)谧鯽jax時(shí),都要借助于一般處理程序(.ashx)或web服務(wù)(.asmx),并且每一個(gè)請(qǐng)求都要建一個(gè)這樣的文件,非常麻煩,下面我們甩掉ashx和asmx來使用jQuery Ajax 請(qǐng)求webservice來實(shí)現(xiàn)更簡(jiǎn)練的Ajax,需要的朋友參考下2016-08-08淺談jquery點(diǎn)擊label觸發(fā)2次的問題
下面小編就為大家?guī)硪黄獪\談jquery點(diǎn)擊label觸發(fā)2次的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06