Jquery on绑定的事件 触发多次实例代码


Posted in Javascript onDecember 08, 2016

用‘on'函数为一个新增的按钮绑定了一个事件,这是事件会触发多次。

<html> 
<head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>码上飘</title> 
  <script src="/FrontStyle/js/jquery-1.11.2.min.js" type="text/javascript"></script> 
  <script> 
    $(function(){ 
      $('#btn1').click(function () { 
        $('#btnBind').on('click',function () { 
          alert(123); 
        }); 
      }); 
    }) 
  </script> 
</head> 
<body> 
<input id="btn1" type="button" value="确认" /> 
<input id="btnBind" type="button" value="绑定按钮" /> 
</body> 
</html>

如上面的代码,如果你点击多次'btn1'按钮,那么就会绑定多少次click事件到'btnBind'按钮上,on是绑定多少次就触发多少次的。

解决方案:

1.要想它只绑定一次,可以先'off'解绑然后再'on'。

$('#btnBind').off('click').on('click',function () { 
  alert(123); 
});

2.执行一次后解绑unbind()

$('#btn1').click(function () { 
    $('#btnBind').on('click',function () { 
      alert(123); 
    });<BR>     $("#btnBind").unbind("click") 
});

以上这篇Jquery on绑定的事件 触发多次实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
javascript事件模型介绍
May 31 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 #Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 #Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 #Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 #Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 #Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 #Javascript
浅谈Node.js:fs文件系统模块
Dec 08 #Javascript
You might like
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
webpack多页面开发实践
2017/12/18 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python简单实现获取当前时间
2016/08/27 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
2014年小班元旦活动方案
2014/02/16 职场文书
客服专员岗位职责
2014/02/28 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
海底两万里读书笔记
2015/06/26 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js