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 相关文章推荐
JS 自定义函数缺省值的设置方法
May 05 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
PHP explode()函数用法、切分字符串
2012/10/03 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php安装swoole扩展的方法
2015/03/19 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php实现小程序支付完整版
2018/10/09 PHP
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
Python操作Word批量生成文章的方法
2015/07/28 Python
简单的Python人脸识别系统
2020/07/14 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
一夜的工作教学反思
2014/02/08 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
小学语文业务学习材料
2014/06/02 职场文书
机电一体化专业求职信
2014/07/22 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
综合管理员岗位职责
2015/02/11 职场文书
离婚协议书范文2016
2016/03/18 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
Python包argparse模块常用方法
2021/06/04 Python