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 相关文章推荐
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
javascript中Function类型详解
Apr 28 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
js实现计时器秒表功能
Dec 16 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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
jquery offset函数应用实例
2012/11/14 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
js有序数组的连接问题
2013/10/01 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
python os.listdir()乱码解决方案
2021/01/31 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
如何做好总经理助理
2013/11/12 职场文书
会计岗位职责范本
2015/04/02 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS