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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery实现鼠标拖动图片功能
Mar 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
Zerg基本策略
2020/03/14 星际争霸
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
JS 建立对象的方法
2007/04/21 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
一道python走迷宫算法题
2018/01/22 Python
python多进程控制学习小结
2018/10/31 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Python有参函数使用代码实例
2020/01/06 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
比利时家具购买网站:Home24
2019/01/03 全球购物
实习期自我鉴定
2013/10/11 职场文书
教师师德反思材料
2014/02/15 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
代理人委托书
2014/09/16 职场文书
放牛班的春天观后感
2015/06/01 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android