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 相关文章推荐
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
javascript如何定义对象数组
Jun 07 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
5种 JavaScript 方式实现数组扁平化
Oct 05 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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
JsRender实用入门教程
2014/10/31 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
django模板结构优化的方法
2019/02/28 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
如何用python处理excel表格
2020/06/09 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
经销商会议开幕词
2016/03/04 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
在Python中如何使用yield
2021/06/07 Python
Redis RDB技术底层原理详解
2021/09/04 Redis
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫