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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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文件缓存类汇总
2014/11/21 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
简明 Python 基础学习教程
2007/02/08 Python
python如何将图片转换为字符图片
2020/08/19 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python json格式化打印实现过程解析
2020/07/21 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
商务会议邀请函
2014/01/09 职场文书
三八节标语
2014/06/27 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
高二化学教学反思
2016/02/22 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python