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或css文件后面跟参数的原因说明
Jan 09 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
python连接字符串的方法小结
2015/07/13 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python中的变量如何开辟内存
2018/06/26 Python
python redis 删除key脚本的实例
2019/02/19 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
会计电算化专业毕业生推荐信
2013/12/24 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
师范类求职信
2014/06/21 职场文书
交通志愿者活动总结
2014/06/27 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL