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 相关文章推荐
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
基于JS实现快速读取TXT文件
Aug 25 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
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
php限制文件下载速度的代码
2015/10/20 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
php阳历转农历优化版
2016/08/08 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
python3判断IP地址的方法
2021/03/04 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
中文师范生自荐信
2014/01/30 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书