unbind方法在事件中的使用,解决同类或同名元素事件触发多次问题

防止多次触发click事件 一、问题描述 用户频繁触发同一表单的提交按钮可能会导致流程或程序紊乱 二、需求 满足问题需求,在不妨碍用户使用的情况下禁止程序多次被触发 三、实现逻辑 完成触发后解绑点击/相关事件 四、实现代码 1、知识点补充 unbind()方法 (1) 官方说明:unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。 (2)简单理解:解绑,与绑定相对 2、代码 <%... 阅读详情

在编写一个html页面时,有大量的元素使用同一个类,给这些具备同类的元素定义了事件,如下所示:

<script>
            $('.txtClassBox').change(function (e) {

  alert("in");

   }

</script>


当同类的元素内容发生改变的时候,就会触发上述的事件,但是改变内容的该元素出现后面有几个这个同类元素,那么上述的事件就会自动触发N+1次,这个1次就是当前触发change的元素,N是后面的同类元素的个数。调试过程中有点无语,明明只有一个发生改变,为什么会出现这样的事情?


经过一番挣扎,发现上述的方法编写有些问题,问题的关键是同一个元素被多次定义了这个事件引起的,解决这个问题的关键就是unbind

规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。

$(selector).unbind(event,function)

因此,将上述的方法改为:

 $('.txtClassBox').unbind().change(function (e) {

alert("in");

}

就可以解决弹出多次,或者说事件触发多次的问题。




Linux设备驱动节点里的bind与unbind 嵌入式Linux驱动绑定与解绑操作。 阅读详情

相关推荐

unbind解绑的几种方式实例

jquery中的函数unbind的几种解绑方式,通过代码实例显示的淋淋尽致,有根据名字,类型,命名空间等.

jQuery绑定事件的三种常见方式(bind、one、【change、click、keydown、hover】)

一、bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数。 也可以同时给一个元素绑定多个事件,我们来看一下例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" >&lt

不动声色的小蜗牛的博客 2938

别再手动写ZPL了!用C#和斑马官方SDK搞定ZT410 RFID打印机(附中文乱码解决方案)

本文详细介绍了如何使用C#和斑马官方SDK驱动ZT410 RFID打印机,解决中文乱码和RFID数据写入等常见问题。通过实战指南,开发者可以快速掌握从基础连接到高级调试的全流程,提升打印效率和可靠性。特别适用于物流、零售和资产管理领域的应用。

weixin_29267307的博客 223

jquery监听复选框事件,导致ajax重复提交问题解决方法

问题描述 点击一次复选框,ajax重复提交 解决方案 $("input[type='checkbox']").unbind('change').change(function(){ alert("ok"); }); 因为原有的change事件会与自己编写的change监听事件叠加 , 导致了ajax的重复提交 ,使用unbind解绑原有的change事件,使得ajax只提交一次 unbind函数中的事件名与你监听的事件名相同 最后效果 : ...

Dev_Hugh的博客 638

UDS诊断ISO14229新手入门篇

这个命令的格式稍微复杂一点。sub-function = 0x06 用于读取某个 DTC 及其相关的环境数据,此时 parameter 为 4 个 byte,前三个 byte 用于标识我们要读取的 DTC,第四个 byte 用于标识要读取的环境数据的范围,UDS 规定使用 FF 来表示读取所有的环境数据,各厂家可以要根据自己的需求定义其他的值来代表要读取的环境数据的范围。环境数据包括 DTC 状态,优先级,发生次数,老化计数器,时间戳,里程等,厂家还可以根据自己的需求定义一些此 DTC 产生时的测量数据。

weixin_45387165的博客 1972

智能温室:温室环境监测_(7).土壤监测技术包括pH值和电导率

土壤的pH值是指土壤溶液的酸碱度,它对植物的营养吸收和生长发育有着重要的影响。在智能温室中,土壤监测是非常重要的一个环节,因为土壤的pH值和电导率直接影响植物的生长和健康。本节将详细介绍如何利用传感器和数据处理技术来监测土壤的pH值和电导率,并提供具体的代码示例。在智能温室中,监测到的土壤pH值和电导率数据需要传输到中央控制系统进行进一步的处理和分析。通过以上步骤,您可以构建一个完整的智能温室土壤监测系统,实时监控土壤的pH值和电导率,确保植物在最佳的生长环境中。校准通常包括在已知电导率的标准溶液中进行。

zhubeibei168的博客 1408

focus、blur、change、one、trigger、unbind 事件的使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> New Web Project $(function(){ $("#username").focus(function(){

笔记 1万+

一分钟了解OpenSpec (规格)

OpenSpec是由Fission AI开源的轻量级规范驱动开发(SDD, Spec-Driven Development)CLI工具。它专为AI编程助手(如Cursor、Claude Code)设计,核心是**“先约定,后编码”:在AI写代码前,先通过结构化规范文档达成共识,让开发过程可预测、可审计、可协作**。轻量无侵入:单CLI、无依赖、不改造项目、1分钟接入存量友好:增量Spec、不重构旧文档、1→n王者完全可控:每步审查、AI按图施工、零返工协作利器。

h a 6 6 6 c k 为 你解决复杂难题! 2744

linux驱动绑定设备 命令 bind,Linux设备驱动节点里的bind与unbind

在Linux环境下,如果有两张网卡,假如A识别为eth0,B识别为eth1,而有些时候想对调设备结点,有如下办法可以解决该问题:1.确认驱动对应的设备结点网卡A:ls /sys/devices/c9410000.ethernet/driver返回如下内容:bindc9410000.ethernetueventunbind而网卡B:ls /sys/devices/c9420000.ethernet/...

weixin_39615499的博客 1269

ASPICE学习笔记

ASPICE的全称是Automotive SPICE。

汽车电子软件领域知识分享 1355

Multisim14.0仿真应用设计(十六)74LS138译码器应用仿真

74LS138为3线-8线译码器。

zhusl6688的博客 2980

Jquery中按钮事件重复绑定导致事件多次触发解决办法

Jquery中按钮事件重复绑定导致事件多次触发解决办法 在用jquery绑定事件的时候,一般来说习惯性都是喜欢绑定匿名事件。比如下面的` &amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;input type=&amp;quot;button&amp;quot; class=&amp;quot;dv&amp;quot; value=&amp;quot;按钮&amp;quot;&amp;amp

qq_41559229的博客 7348

基于STM32设计的万能红外遥控器(学习型)

当前介绍了一种基于STM32微控制器设计的红外遥控器,支持接收解码功能和发送功能,可以将接收的码原样发送出去。 红外遥控器作为智能设备控制方式之一,在一定程度上满足了人们对于快速方便控制的需求。 当前设计的红外遥控器支持学习模式和发送模式。通过矩阵键盘上的数字键选择发送对应的控制码。 一共支持学习10个控制码,对应矩阵键盘上的数字。0~9。

6559

jquery click事件触发一次 代码执行多次

最近做的一个项目,实现一个功能为:有几个li模块,从点击选中第二个开始判断内容是否与第一个相同,若相同追加到数组里面;若不相同则弹出提示框提示用户是否继续追加,而此时弹框里有确定和取消按钮,点击取消后弹框消失再次点击li模块弹框弹出点击确定按钮则click事件执行了两次。此阶段只有前端操作不涉及后台获取数据,界面不刷新。 界面代码大概是: function liClick(){ $("#anniu").click(function(){ alert(111); // 点击一次 会

JoyIT_的博客 1952

UG\NX二次开发 获取对象的引用集

获取对象的引用集,一个对象可能有多个引用集,下面这个封装函数可以获取对象的所有引用集。

王牌飞行员_里海的博客 489

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

unbind()解决多次弹窗问题

一、遇到的问题 点击按钮,弹窗;关闭弹窗,再次点击按钮,会同时出来两个相同的弹窗;依次类推,多次弹窗 二、解决问题 按钮的点击事件被多次绑定,导致按钮的事件执行次数,随着弹窗弹出的次数累加,解决方法,再次点击按钮前先通过unbind()解绑之前的点击事件,这样就不会多次绑定点击事件了 $('.test').unbind("click").bind("click",function(e){ //TODO 点击事件触发的代码 }); ...

u010865136的专栏 1409

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

jQuery添加的事件被多次执行的解决方案及分析

jQuery添加的事件被多次执行 在学习jQuery的过程中,发现自己的一个小例子出现了一些问题。单个button的click时间被多次重复执行。 解决方案在文章下方 案例分析 具体需求是, 根据一个数组中的数据给页面上添加节点,节点需要添加监听。 我的处理方式 //此方法为添加操作的监听方法 , 可以给页面上的table中添加一条数据 let $addTableItem = function (data){ let table = $("#table"); table.append($g

来自菜鸟的摸索 1795

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

bind元素和unbind元素使用

1.bind元素是js中常用到的元素 主要用法如下: $("xx").bind("click",function(){}) 其效果和$("xx").click(function(){})雷同,但相比之下bind元素的用法较为灵活多变,bind意思为绑定事件,可以绑定click事件,可以绑定mousedown事件等多个事件。 2.unbind顾名思义就是取消绑定 列: $("xx").unbind("click").click(function(){})//意思为取消之前所有对xx元素绑定的click事件

beezen的博客 3782

jquery 使用 unbind 解决重复绑定执行事件

原文:jquery 使用 unbind 解决重复绑定执行事件 存在问题 在jquery监听click事件的时候会出现点击一次没有重复,点击第二次就重复的情况。出现这个问题的原因是之前的click事件被绑定后,并没有解绑。 还原问题现场 先来看看需求:点击一个数据表之后,确认自定义的模态窗口,然后删除改行的数据,并打印改行数据的ID。 从上面...

DevOps海洋的渔夫@专栏 792

click事件嵌套click事件多次触发的解决方法

这个问题是在做一个聊天界面时出现的 想要的效果是点击左侧的头像时,获取其对应的id,之后在对话框中点击发送按钮时发送消息,并获取头像的id,这个时候发现,当点击发送绑定的click时,变量就会显示出所有点过的所有id。 最开始我想要解除事件冒泡,后来发现不是这个问题 分析后发现每次点击外部的click事件后,内部的click事件都会绑定一次,因此会遍历很多次 解决方案是每次点击后使...

大桶爆米花eee 6513

jquery Click事件点击一次,执行多次原因之一

整理多个方法。 方法一,使用unbind进行重新绑定: 用jquery 绑定一个按钮click事件后,第一次点击后,一切正常,第二次点击,竟然执行两次,以后越来越多。 后来查看文档发现 jquery click 不是 替换原有的function 而是接着添加,所以才会执行次数越来越多。 function noteSubmit(contentObj){ //点击发送按钮事件 $('.noteB...

suxuelian的博客 5335

jQuery的onclick事件导致点击事件累计触发的问题

问题场景 维护公司老项目的时候,发现以下问题。 在使用jQuery中的click事件对页面中某个元素对象进行绑定时,如果不采用防抖/节流的写法会出现事件被多次绑定的情况。如果发生这种问题,会导致一次触发请求多次的情况,直接导致服务器的压力飙升。严重的话,服务器会直接挂掉。接下来具体说一下这个问题是如何形成的。 ​ <div onclick="handleClick()">点我&lt...

进无止进 1542

解决jquery使用on()方法绑定事件被执行多次的问题

jQuery用on()方法绑定了事件之后,在代码执行过程中,可能会遇到事件被多次执行的情况。本来以为是事件冒泡的问题,后来发现是on()方法的特性引起的问题。简单还原一下问题的场景这里简单...

web前端开发 967

jquery 事件 多次绑定,多次触发,怎么清除历史绑定事件

为什么80%的码农都做不了架构师?>>> ...

weixin_33970449的博客 627

jQuery给一个元素绑定事件前,一次点击会多次触发的问题所在

如果在给一个元素绑定事件后,再次绑定事件就会出现多次绑定的情况,此时就会出现多次触发,解决方法我采用的是,在绑定事件前进行解绑,bind绑定的时间用ubbind解绑,其他绑定方法用对应的解绑方法解绑。

小小的人儿的博客 2168

jQuery unbind 删除绑定事件 / 移除标签方法

jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数,则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。 返

Hurry的专栏 6796
上一篇: java sha1
下一篇: Flot画动态折线图 (两条折线动态的)
hack8
博客等级 码龄18年 109粉丝 128原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值