jQuery事件重复绑定解决方案
今天在使用jQuery过程中碰到了这个隐藏在代码中的问题:事件绑定会累加而不会覆盖掉前者。特此记录下解决方案。
测试代码:
<!DOCTYPEHTML><html><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"><metaname="description"content=""><metaname="author"content=""><!--[ifltIE9]><scriptsrc="js/html5shiv.js"></script><![endif]--><scriptsrc="js/jquery-1.7.2.min.js"></script><script>vartest=function(){$("p").on("click",function(){//alert($(this).text());console.log($(this).text());});}varok=function(){$("p").off().on("click",function(){//alert($(this).text());console.log($(this).text());});}$(document).ready(function(){$("a").click(test);$("button").click(test);$("input").click(ok);});</script></head><body><ahref="#">第一次</a><button>第二次</button><inputtype="button"value="最终"/><p>0</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p></body></body></html>看出问题来了吗?没看出来那就先后点击按钮对数字进行事件绑定,然后再点数字看下效果就知道了。jQuery事件绑定是会累加的,最终那个才是正确写法,绑定前先释放掉。 注:.on及.off在jQuery1.7+支持!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。