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跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
js 走马灯简单实例
Nov 21 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 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 身份证号验证函数
2009/05/07 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
php实现求相对时间函数
2015/06/15 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
使用console进行性能测试
2015/04/27 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
Python简明入门教程
2015/08/04 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
初二物理教学反思
2016/02/19 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers
python计算列表元素与乘积详情
2022/08/05 Python