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 相关文章推荐
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php实现通过ftp上传文件
2015/06/19 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
jQuery 表单验证扩展(三)
2010/10/20 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JS的数组迭代方法
2015/02/05 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
js实现常用排序算法
2016/08/09 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
Django Form常用功能及代码示例
2020/10/13 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
书法培训心得体会
2014/01/05 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python