jQuery事件重复绑定解决方案

发布时间:2020-05-22 12:09:47 作者:gdonline
来源:网络 阅读:1739

 今天在使用jQuery过程中碰到了这个隐藏在代码中的问题:事件绑定会累加而不会覆盖掉前者。特此记录下解决方案。

测试代码:

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta charset="UTF-8" /> 
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  6. <meta name="description" content=""> 
  7. <meta name="author" content=""> 
  8. <!--[if lt IE 9]> 
  9.     <script src="js/html5shiv.js"></script> 
  10. <![endif]--> 
  11. <script src="js/jquery-1.7.2.min.js"></script>    
  12. <script> 
  13.     var test = function(){ 
  14.         $("p").on("click",function(){ 
  15.             //alert($(this).text()); 
  16.             console.log($(this).text()); 
  17.         });      
  18.     } 
  19.      
  20.     var ok = function(){ 
  21.         $("p").off().on("click",function(){ 
  22.             //alert($(this).text()); 
  23.             console.log($(this).text()); 
  24.         });  
  25.     } 
  26.      
  27.     $(document).ready(function(){ 
  28.         $("a").click(test); 
  29.         $("button").click(test); 
  30.         $("input").click(ok); 
  31.     });       
  32. </script>   
  33. </head> 
  34. <body> 
  35.     <a href="#">第一次</a> <button>第二次</button> <input type="button" value="最终" /> 
  36.     <p>0</p> 
  37.     <p>1</p> 
  38.     <p>2</p> 
  39.     <p>3</p> 
  40.     <p>4</p> 
  41.     <p>5</p> 
  42. </body>      
  43. </body> 
  44. </html>
  45.  
  46. 看出问题来了吗?没看出来那就先后点击按钮对数字进行事件绑定,然后再点数字看下效果就知道了。jQuery事件绑定是会累加的,最终那个才是正确写法,绑定前先释放掉。 注:.on及.off在jQuery1.7+支持! 

 

推荐阅读:
  1. JQuery事件——绑定多事件.on()和卸载事件.off()
  2. jQuery动态行绑定事件,发生重复绑定解决方案

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery 事件绑定 ue

上一篇:电信云主机的作用有哪些?

下一篇:轻松了解“Web应用防火墙”

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》