最近在工作上遇到一個(gè)點(diǎn)擊事件累加的問題侮东,為元素添加點(diǎn)擊事件效果,但是總是效果失敗豹芯,最后發(fā)現(xiàn)點(diǎn)擊事件被執(zhí)行了多次悄雅,上網(wǎng)查了一下铁蹈,下邊就是解決這個(gè)問題的幾種思路
案列引自 踮起腳尖眺望6
$("#adsCollection_tb .contentDel").on("click",function(){
$(this).each(function(){
var obj_address_name = $(this).parent().parent().find(".obj_address_name").html();
var jsonDel = {
"head": {
"module": "object",
"function": "del_obj"
},
"body":[
{
"name": obj_address_name
}
]
}
alert("確定要?jiǎng)h除這一條嗎?");
addrGroup.Ajax(jsonDel);
});
});
在頁面中為一個(gè)元素綁定事件,事件執(zhí)行后頁面未刷新且元素還在容诬,然后你再次點(diǎn)擊娩梨,元素又被綁定個(gè)一次點(diǎn)擊事件,這樣第二次點(diǎn)擊就會執(zhí)行兩次览徒,以此類推狈定。如何解決累加綁定习蓬?
第一種方法
元素點(diǎn)擊后刪除,然后再動(dòng)態(tài)創(chuàng)建一個(gè)元素躲叼,再添加點(diǎn)擊事件。顯然這個(gè)方式很麻煩押赊。
第二種方法
使用jquery的one()方法,為元素綁定一個(gè)一次性的事件處理函數(shù)流礁,這個(gè)事件處理函數(shù)只會被執(zhí)行一次。
$("#adsCollection_tb").one("click",function(){
alert("執(zhí)行");
})
第三種方法
在每次綁定點(diǎn)擊事件前先解除之前的事件綁定神帅,再為元素綁定事件,類似于先清空找御,在做操作一樣。但你使用bind()方法綁定時(shí)栖疑,可以用unbind()方法解除綁定。通常我們跟愿意用on()方法綁定事件遇革,因?yàn)閎ind()方法已經(jīng)不被推薦揭糕,那么那么就用off()方法解除事件綁定萝快。
$("#adsCollection_tb").unbind("click").bind("click",function(){
alert("執(zhí)行");
});
$("#adsCollection_tb").off("click").on("click",function(){
alert("執(zhí)行");
})著角;