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 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
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
调频问题解答
2021/03/01 无线电
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python实现桌面壁纸切换功能
2019/01/21 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
会计电算化个人求职信范文
2014/01/24 职场文书
劳动实践课感言
2014/02/01 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
文艺晚会策划方案
2014/06/11 职场文书
治安消防安全责任书
2014/07/23 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
室外天线与收音机天线杆接合方法
2022/04/05 无线电
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS