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 相关文章推荐
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 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 HTML代码串截取代码
2008/12/29 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
医院工作检讨书范文
2014/02/10 职场文书
根叔历年演讲稿
2014/05/20 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
党支部对转正的意见
2015/06/02 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python