JQuery的on事件多次触发问题

最新推荐文章于 2022-09-02 10:31:48 发布
原创 最新推荐文章于 2022-09-02 10:31:48 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Jquery的on事件多次触发问题

本文探讨了JQuery中on事件多次触发的问题，包括问题描述、原因分析及解决方法。当鼠标移入某个元素时注册的点击事件在后续点击中触发多次，导致事件处理函数被执行多次。解决办法是清除多余的点击事件，确保事件只绑定一次，从而避免事件重复执行的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

JQuery的on事件多次触发问题

问题描述:

代码如下:

<!-- 结构 --> 
<div class="content">
     <div id='result'></
最低0.47元/天 解锁文章

200万优质内容无限畅学
jQuery事件绑定方法on()导致事件多次执行的问题
2301_79325657的博客
09-30 500
另外，如果只需要事件在首次触发时执行一次，可以使用one()方法来绑定事件，它会自动解绑事件处理程序。在jQuery中，可以使用on()方法来绑定事件，该方法可以绑定多个事件类型，并且可以对动态添加的元素生效。在以上示例中，首先使用on()方法绑定了一个点击事件，然后使用off()方法解绑了该事件。如果确定事件被重复绑定了，可以使用off()方法先解绑事件，然后再重新绑定。下面是一个简单的示例，演示了如何使用on()方法绑定事件，并使用off()方法解绑事件，以及使用one()方法绑定只执行一次的事件。
Jquery on绑定的事件 触发多次实例代码
10-20
这个问题通常发生在动态添加的元素上，因为每次动态创建这些元素时，新的事件监听器会被附加，从而导致事件被多次触发。 在给出的实例代码中，`#btn1`按钮的点击事件会为`#btnBind`按钮添加一个新的`click`事件监听...
关于新增元素使用jQuery on()方法重复绑定的问题
weixin_30248399的博客
06-08 168
最近写ajax新增元素button绑定click事件的时候发现元素重新添加进来的时候会多执行一次事件函数，找了半天，怀疑是on()的问题，于是测试了一下，果然是因为on()的使用方式造成了有的新增元素会执行多次绑定事件函数。 当使用$(document).find('target-selector').on(event,function);时，必须在元素每次添加进来之后重新绑定，...
jQuery on 绑定的事件触发多次
weixin_30484739的博客
05-30 142
jquery用on绑定事件，在代码执行过程中，可能会遇到多次执行的情况。 解决方案是在on的事件前面加上一个off，再on。 $('#btnBind').off('click').on('click',function () { alert(123); });$("#xxx").off('keydown').focus().on('keydown',function(e) {}...
Jquery on绑定的事件 触发多次
weixin_34293911的博客
08-25 181
用‘on’函数为一个新增的按钮绑定了一个事件，这是事件会触发多次。 <html> <head> <meta name="viewport" content="width=device-width" /> <title>码上飘</title> <script src="/FrontStyle/js...
Jquery点击事件连续执行多次
lyq8778的博客
09-02 1658
jquery重复执行
js onmousewheel事件多次触发问题解决方法
12-09
我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果，遇到了很多问题，后来在kk的帮助下，终于解决了这个问题，甚是欢喜，于是记录一下： 我最初的代码是这样的： <!DOCTYPE html> <...
jquery mobile的触控点击事件会多次触发问题的解决方法
12-03
通过以上方法，可以有效地解决jQuery Mobile在特定设备上`tap`事件多次触发的问题，确保应用在各种设备上的行为一致和可靠。同时，理解并适当地使用触摸事件能极大地提升移动Web应用的用户体验。
解决jquery使用on()方法绑定事件被执行多次的问题
web前端开发
03-21 903
jQuery用on()方法绑定了事件之后，在代码执行过程中，可能会遇到事件被多次执行的情况。本来以为是事件冒泡的问题，后来发现是on()方法的特性引起的问题。简单还原一下问题的场景这里简单...
jquery .On()绑定事件的触发机制
weixin_34111819的博客
03-09 363
选择器只能选择已存在元素，其他元素需要作为参数传递给on 转载于:https://www.cnblogs.com/mailaidedt/p/6525492.html
jquery on()事件多次调用解决办法
Sunny__wei的博客
09-12 2246
今天闲的没事 写了个时时监控input框的组件，在用on() 方法进行绑定change事件时发现出现多次调用的情况。 现在说说自己的解决方法，和大家分享一下： var validators = function() { $(document).on("change","[validator]",function() { con...
jq点击事件多次响应_Jquery中on绑定事件 点击一次 执行多次 的解决办法
weixin_29370183的博客
12-30 625
举个例子，在同一个页面有下拉选择框按用户分析按单位分析按角色分析当选择用户分析时，一组用户查询条件展示出来，queryUser查询按钮显示，并绑定查询方法countByUser(),$("#queryUser").on("click",countByUser);当选择单位分析时，一组单位查询条件展示出来，queryDept查询按钮显示，并绑定查询方法countByDept(),$("#queryD...
input中文输入多次触发oninput事件
mufengdeying111的博客
05-12 3410
oninput事件在<input>或<textarea>元素的值发生改变时触发 onchange事件也是监听文本框变化后触发，不同的是oninput事件是立即（即时）触发，onchange则是在元素失去焦点时触发 onchange的触发频率仅次于oninput事件 使用DOM3以下三种复合事件： 1、compositionstart:官方解释，触发于一段文字的输入之前，也就是在输入一段需要的文本（第一个字母开始）或语音开始输入时会触发。 2、compositionupdat..
jQuery 的事件方法 .on()
segclliwf的博客
12-18 1769
jQuery .on()是常用的方法，它類似于JavaScript 的addEventListener方法，可以監聽處理所有的事件。 一. 使用方法 步驟1：使用選擇器建立 jQuery 選取集合； 步驟2：使用on()指定事件名稱和處理函數。 例如：$(“li”).on(“click”,function(){ $(this).addClass(“completed”); }); 二.例子 .on(events[,seletor][,data],function(e){…}) 例子： $(“ul”).on(
jquery 的on事件用法
海涛高软
10-15 550
通过通过选择器字符串来过滤匹配元素的子元素中哪些可以响应绑定的事件。代码中，类名为children的元素和它的子元素可以调用绑定的事件。 <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>脚本之家</title>
JQuery中的on事件
DavidZhao的博客
01-31 2076
on(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数。   on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.o...
Jquery on方法绑定事件后执行多次
AinUser的博客
10-17 627
借用一张图，说明问题 解决：在$("#"+id).on('click'或者'change',function () {}等等方法的触发之间之前先解绑 $("#"+id).off("change");
Jquery 【on事件】
annao6693的博客
06-15 457
一.on事件的定义和用法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序。 自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。 注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元...
jq点击事件多次响应_jQuery单击事件触发多次
weixin_39811842的博客
12-20 1798
我试图用Javascript编写视频扑克游戏，以降低其基础知识，但是我遇到了一个问题，其中jQuery click事件处理程序多次触发。它们被附加到用于下注的按钮上，并且对于在游戏过程中第一手下注(仅触发一次)非常有效。但是在秒针下注中，每次按下一个下注或下注按钮都会触发两次点击事件(因此，每次按下正确的赌注量是两次)。总体而言，在按一次下注按钮时，触发单击事件的次数遵循此模式序列的第i个术语用于...
jquery onPostBody 多次触发仅第一次响应
最新发布
03-22
如果事件被委托到父元素，而子元素多次触发事件，可能会引起处理函数多次执行。此时需要确认事件委托是否正确，或者使用stopPropagation()来阻止冒泡。 在引用[2]的代码中，处理函数代理会检查元素是否被禁用，如果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值