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 相关文章推荐
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
Javascript基础教程之变量
Jan 18 Javascript
jquery实现全屏滚动
Dec 28 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
vue实现简单loading进度条
Jun 06 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
express 项目分层实践详解
Dec 10 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
使用vant的地域控件追加全部选项
Nov 03 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
Zend Guard一些常见问题解答
2008/09/11 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
思想品德课教学反思
2014/02/10 职场文书
关于颐和园的导游词
2015/01/30 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
技术支持岗位职责
2015/02/13 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js