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英文日期(有时间)选择器
May 02 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
vue全局使用axios的操作
Sep 08 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使用者状态管理功能的应用
2006/10/09 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
php解析url的三个示例
2014/01/20 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python的变量与赋值详细分析
2017/11/08 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
聊城大学毕业生自荐书
2014/02/01 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书