举个例子,在同一个页面有下拉选择框

<select class="mySelect">
<option value="user">按用户分析</option>
<option value="dept">按单位分析</option>
<option value="role">按角色分析</option>
</select>

当选择用户分析时,一组用户查询条件展示出来,queryUser查询按钮显示,并绑定查询方法countByUser(),$("#queryUser").on("click",countByUser);

当选择单位分析时,一组单位查询条件展示出来,queryDept查询按钮显示,并绑定查询方法countByDept(),$("#queryDept").on("click",countByDept);

当选择角色分析时,一组角色查询条件展示出来,queryRole查询按钮显示,并绑定查询方法countByRole(),$("#queryRole").on("click",countByRole);

先选择按用户分析,此时queryUser按钮绑定了一次click事件,再选择按单位分析,再选择按用户分析,此时queryUser按钮又绑定了一次click事件,点击查询按钮会调用两次countByUser()方法。

解决办法是在绑定click之前先解绑方法,或者调用完方法之后解绑。

$("#queryUser").off("click"); //如果该对象存在其他click事件先解绑事件

$("#queryUser").on("click",countByUser); //绑定事件

Jquery中on绑定事件 点击一次 执行多次 的解决办法的更多相关文章

  1. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

  2. jquery中on绑定事件

    之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发 eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 ...

  3. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  4. js便签笔记(6)——jQuery中的ready()事件为何需要那么多代码?

    前言: ready()事件的应用,是大家再熟悉不过的了,学jQuery的第一步,最最常见的代码: jQuery(document).ready(function () { }); jQuery(fun ...

  5. Jquery中on绑定的一些小坑

    ---恢复内容开始--- 今天我们来说说关于JQuery中事件绑定中on绑定的一些小问题,直接上代码了,大家拷下去就可以用 <!DOCTYPE html> <html lang=&q ...

  6. JQuery Mobile - 为什么绑定事件后会被多次执行?

    JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click  不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现 ...

  7. 关于Jquery的delegate绑定事件无效

    今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...

  8. 2017年3月25日工作日志:Jquery使用小结[绑定事件判断、select标签、军官证正则]

    jQuery获取DOM绑定事件 在1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: $.data(domObj,'events');//或者$('selector').data( ...

  9. jQuery添加html绑定事件

    jQuery添加html绑定事件 $("#xxx").on("click",".dev",function(){ });

随机推荐

  1. ASP.NET MVC中,前台DropDownList传值给后台。

    List<SelectListItem> ZH = new List<SelectListItem>(); ZH.Add(new SelectListItem { Text = ...

  2. null id in com.rocky.** entry 错误处理

    1. 概述 使用hibernate往mysql数据库插入记录出错如下 10:37:57,364 ERROR [AssertionFailure] an assertion failure occure ...

  3. Visual Studio扩展与更新中插件被禁用,安装后无法使用

    在Visual Studio中的扩展与更新中安装插件后,显示[禁用],重新安装后仍然不能使用,但是VS默认安装的扩展却可以正常使用. 这里需要注意下方显示“当前不允许加载每用户扩展”,点击“启用每用户 ...

  4. C++中精确到小数点后任意位

    #include <iostream> #include <iomanip> //用setprecision(n)设置精度,其中n表示精确到小数点后n位 using names ...

  5. 如何一次性下载某个类库依赖的所有jar包"

    ** 经常碰到这种事情: ** 在一些非maven工程中(由于某种原因这种工程还是手工添加依赖的),需要用到某个新的类库(假设这个类库发布在maven库中),而这个类库又间接依赖很多其他类库,如果依赖 ...

  6. Hyperledger Fabric 1.0 学习搭建 (二)--- 源码及镜像文件处理

    2.1下载Fabric源码下载Fabric源码是因为要用到源码中提到的列子和工具, 工具编译需要用到go语言环境, 因此需要把源码目录放到$GOPATH下. 通过1.3中go的安装配置, $GOPAT ...

  7. 学习Road map Part 02 机器学习和图像识别

    方法:结合项目.竞赛.mentor计划

  8. June 26th 2017 Week 26th Monday

    I am a little tempted, but so afraid to look in your eyes. 我对你有一点动心,却如此害怕看你的眼睛. Now that you are tem ...

  9. angular里forRoot的作用

    模块A是这样定义的 @NgModule({ providers: [AService], declarations: [ TitleComponent ], exports: [ TitleCompo ...

  10. 使用redux开发的简单步骤

    一.安装redux包 npm install redux --save 二.根据APP数据结构或者后台请求的数据结构拟定state的大致结构. 可以把state写成一个对象字面量,放在reducer文 ...