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 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 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
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
Jquery cookie操作代码
2010/03/14 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
详解Python如何生成词云的方法
2018/06/01 Python
python实现简单多人聊天室
2018/12/11 Python
python实现手机销售管理系统
2019/03/19 Python
python lxml中etree的简单应用
2019/05/10 Python
python实现udp传输图片功能
2020/03/20 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
初中体育教学反思
2014/01/14 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
三行辞职书范文
2015/02/26 职场文书
高中运动会广播稿
2015/08/19 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang