jquery事件重復(fù)綁定的快速解決方法
一 $.fn.live 重復(fù)綁定
解決:使用die()方法,在live()方法綁定前,將此元素上的前面被綁定的事件統(tǒng)統(tǒng)解除,然后再通過live()方法綁定新的事件。
//先通過die()方法解除,再通過live()綁定
$(“#selectAll”).die().live(“click”,function(){
//事件運(yùn)行代碼
});
二 click等事件
解決:使用unbind("click")方法先解除綁定的事件再綁定新事件,即在給對(duì)象綁定事件之前先移除該對(duì)象上的原有事件
完整測(cè)試代碼:
<div class="box">
<button id="test">重復(fù)綁定觸發(fā)按鈕</button>(點(diǎn)擊此按鈕兩次及以上,即可觸發(fā)重復(fù)綁定,再點(diǎn)擊下面的按鈕就可看到結(jié)果)
<br/><br/>
<button id="test1">click重復(fù)綁定測(cè)試按鈕</button>
<button id="test2">click綁定一次測(cè)試按鈕</button>
<button id="test3">live重復(fù)綁定測(cè)試按鈕</button>
<button id="test4">live綁定一次測(cè)試按鈕</button>
</div>
<script type="text/javascript" src="../static/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
var i = 1,j=1,k=1,h=1,n=1;
var triggerBind = function(){
$("#test1").click(function() {
alert("click未解除綁定重復(fù)綁定執(zhí)行第" + j++ + "次");
});
$("#test2").unbind('click').click(function() {
alert("click解除綁定執(zhí)行" + k++ + "次");
});
$("#test3").live("click",function() {
alert("live未解除綁定重復(fù)執(zhí)行第" + h++ + "次");
});
$("#test4").die().live("click",function() {
alert("live解除綁定后執(zhí)行" + n++ + "次");
});
}
$("#test").click(function() {
triggerBind();
alert("觸發(fā)綁定點(diǎn)擊第" + i++ + "次");
});
});
</script>
相關(guān)文章
jQuery中的on與bind綁定事件區(qū)別實(shí)例詳解
bind與on的區(qū)別就在于–事件冒泡,關(guān)于jquery中的on與bind綁定事件的區(qū)別通過本文給大家實(shí)例講解,需要的朋友參考下吧2017-02-02jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析
這篇文章主要介紹了jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析,文中列舉了各種常用的dialog屬性,整理得很全面,需要的朋友可以參考下2016-04-04實(shí)例講解jQuery EasyUI tree中state屬性慎用
本文通過實(shí)例代碼給大家介紹jQuery EasyUI tree中state屬性慎用,切忌把state設(shè)置為closed,否則該節(jié)點(diǎn)會(huì)加載整個(gè)tree,形成死循環(huán)2016-04-04jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序
這篇文章主要介紹了jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序的實(shí)現(xiàn)方法,感興趣的小伙伴們可以參考一下2015-12-12jQuery學(xué)習(xí)之DOM節(jié)點(diǎn)的插入方法總結(jié)
這篇文章主要給大家介紹了jQuery中DOM節(jié)點(diǎn)的插入方法,文章總結(jié)的很全面,相信對(duì)大家具有一定的參考價(jià)值,需要的朋友們一起來看看吧。2017-01-01jQuery插件FusionCharts實(shí)現(xiàn)的3D帕累托圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的3D帕累托圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts載入xml數(shù)據(jù)繪制3D帕累托圖的相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03