本文實(shí)例講述了jQuery取消特定的click事件實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
眾所周知, jQuery可以多次綁定同一種事件, 而且綁定的每個(gè)事件都可以執(zhí)行。 問題來了, 在動(dòng)態(tài)生成的DOM中, 我們?yōu)槟骋辉亟壎藘煞N不同的click(假設(shè)為A、B), append元素時(shí), 所有元素又綁定一次B, …… 這樣會(huì)導(dǎo)致最后點(diǎn)擊時(shí)B事件會(huì)成倍往上翻。
幸運(yùn)的是,jQuery 為我們提供了很優(yōu)雅的方式, 來取消特定命名空間下的click.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標(biāo)題頁</title>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#divTest").click(function(){
alert("正式事件。");
});
});
function bindEvent(){
for(var i=0;i<3;i++){
$("#divTest").bind("click.test",function(){
testEvent();
});
}
}
function testEvent(){
alert("測試事件");
}
function ignoreMultiEvent(){
$("#divTest").unbind("click.test").bind("click.test",function(){
testEvent();
});
}
</script>
</head>
<body>
<div id="divTest" style="height: 163px;text-align:center;line-height:163px;width: 500px; background-color: #0000FF;">
點(diǎn)我進(jìn)行測試
</div>
<input id="Button2" type="button" value="為上面的DIV綁定3次測試事件" onclick="bindEvent()" />
<input id="Button1" type="button" value="保留正式事件, 取消已綁定的多次測試事件,再綁定一次測試事件 " onclick="ignoreMultiEvent()" />
</body>
</html>
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。