jQuery事件多次绑定与解绑问题实例分析


Posted in jQuery onFebruary 19, 2019

本文实例分析了jQuery事件多次绑定与解绑问题。分享给大家供大家参考,具体如下:

jQuery事件绑定很常见,相信大家经常会用到clickfocusblur等事件,但是如果对控件的某个事件绑定多个方法会是怎样的结果呢,覆盖、累加、或其他效果?今天我就来验证一下这个疑问并说说如何解绑。

一、jQuery事件多次绑定

<head>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      //第二次绑定
      $("#btnAdd").click(function () {
        alert("bind click1");
      });
      //第三次绑定
      $("#btnAdd").on("click", function () {
        alert("bind click2");
      });
      //第四次绑定
      $("#btnAdd").bind("click", function () {
        alert("bind click3");
      });
    });
    function add1() {
      alert("add1()");
    }
  </script>
</head>
<body>
  <h2>UserController->Index</h2>
  <!--第一次绑定-->
  <input type="button" id="btnAdd" name="btnAdd" value="Add" onclick="add1()" />
</body>

验证结果:对控件的某个事件进行多次绑定效果会叠加,截图如下:

jQuery事件多次绑定与解绑问题实例分析

二、jQuery事件解绑

既然能绑定事件,那应该也能对事件解绑,下面展示解绑的方法:

<head>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#btnAdd").click(function () {
        alert("bind click1");
      });
      $("#btnAdd").on("click", add2);
      $("#btnAdd").bind("click", add3);
    });
    function add1() {
      alert("add1()");
    }
    function add2() {
      alert("bind click2");
    }
    function add3() {
      alert("bind click3");
    }
    function cancelBind() {
      //不指定方法名则解绑click事件对应的所有方法,标签内onclick设置的方法仍会执行
      //$("#btnAdd").off("click");
      //$("#btnAdd").unbind("click");
      //解绑click事件对应的add2方法
      $("#btnAdd").off("click", add2);
      //$("#btnAdd").unbind("click", add3);
    }
  </script>
</head>
<body>
  <h2>UserController->CancelBind</h2>
  <input type="button" id="btnAdd" name="btnAdd" value="Add" onclick="add1()" />
  <input type="button" id="btnCancelBind" name="btnCancelBind" value="CancelBind" onclick="cancelBind()" />
</body>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 #jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 #jQuery
jQuery实现的五星点评功能【案例】
Feb 18 #jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 #jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
You might like
php获取英文姓名首字母的方法
2015/07/13 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
JS中表单的使用小结
2014/01/11 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python用Configobj模块读取配置文件
2020/09/26 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
上海中网科技笔试题
2012/02/19 面试题
学校运动会报道稿
2014/09/23 职场文书
护士年终考核评语
2014/12/31 职场文书
会议邀请函
2015/01/30 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
公司财务管理制度
2015/08/04 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
旅游安全责任协议书
2016/03/22 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
配置nginx负载均衡
2022/05/06 Servers