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语言中的Literal Syntax特性分析
Mar 08 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
jQuery操作css样式
May 15 jQuery
实例教学如何写vue插件
Nov 30 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
js+canvas实现纸牌游戏
Mar 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
js常用函数 不错
2006/09/08 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
Js 正则表达式知识汇总
2014/12/02 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
DOM事件探秘篇
2017/02/15 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
python 命名规范知识点汇总
2020/02/14 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
函授自我鉴定范文
2014/02/06 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
python glom模块的使用简介
2021/04/13 Python