jquery click点击一次执行两次

最新推荐文章于 2021-08-14 15:52:40 发布

原创最新推荐文章于 2021-08-14 15:52:40 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#click #jquery

前端专栏收录该内容

42 篇文章

订阅专栏

本文探讨了页面中JS点击事件重复执行的问题，分析了click事件被触发一次但执行两次的原因，并提供了两种解决方案：使用unbind和click组合，或off和on组合来避免事件重复绑定。

错误描述：在页面内触发点击事件，调用了两次js，代码重复执行，

排查结果：click事件点击了一次执行了两次

解决方案：click 和 on 两种写法

$('.btn').unbind('click').click(function(){
    console.log("在触发点击事件之前先把之前绑定的点击事件解除掉")
})

或者

$('.btn').off().on('click',function(){
    console.log("在触发点击事件之前先把之前绑定的点击事件解除掉")
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

素味平生

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JQuery触发两次事件的问题及解决方案

CsCufft的博客

09-22

1192

JQuery触发两次事件的问题通常是由事件重复绑定所导致的。在使用JQuery时，有时会遇到触发两次事件的情况，这可能会导致意外的结果或不良用户体验。本文将详细介绍这个问题的原因，并提供解决方案的源代码示例。造成事件被触发两次的原因通常是事件的重复绑定。当代码中存在多个相同的事件绑定时，每次事件发生时，都会触发所有的绑定处理程序，从而导致事件被执行多次。希望本文的解决方案能帮助您解决JQuery触发两次事件的问题！下面是一些可能的解决方案，可以帮助您解决JQuery触发两次事件的问题。

JQuery 给元素绑定click事件多次执行的解决方法

10-25

// 第一次绑定的事件处理代码 }); // 后来想要更新事件处理，但不移除其他可能存在的click事件 $("#sdfsd").off("click.myNamespace").on("click.myNamespace", function(e) { // 更新后的事件处理代码 }); ...

参与评论您还未登录，请先登录后发表或查看评论

jquery click点击一次执行两次解决方法

热门推荐

ydm东方旭日的专栏

04-19

2万+

$('#sub').unbind('click').click(function () { ... });

jQuery click事件多次执行问题

杨小柒的博客

05-24

2128

jQuery click事件多次执行问题的解决前几天遇到的一个问题：有一个列表页面，每个item中都有相同的三个按钮，第一次点击其中一个按钮的时候—正常，第二次点击它的时候发现执行了两次，再点击一次？三次……我查了文档，click事件不是代替之前的function而是继续添加，就像是一个数组般的。解决方法：在添加click事件时先解绑之前的click事件（unbind方法），或者在click事件

jQuery的click事件一次点击执行多次的原因与解决办法

zhuimenghou的博客

08-14

4488

在js中，使用了jQuery的$("#id").on(“click”,function(e) {}方法，而且在js中，方法声明如下 function orderCancle() { $("#id").on(“click”,function(e) {} } 而且这个方法在多个ajax返回成功后，被多次调用，即多次执行了 orderCancle() ；最后点击的时候，出现了点击一次触发多次click事件的结果。查了资料才发现，jquery的click 不是替换原有的function，而是接着添加。解决办

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

JoyIT_的博客

08-27

1921

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

jQuery实现radio第一次点击选中第二次点击取消功能

10-19

如果`waschecked`为`false`，则说明这是第一次点击，我们需要将单选按钮设为选中状态，使用`$radio.prop('checked', true)`完成，并将`waschecked`设置为`true`，记录当前状态。 4. **代码实现**：根据上述逻辑...

按钮的Ajax请求时一次点击两次提交的解决方法

10-21

在使用JavaScript的Ajax请求时，如果在Ajax请求完成后没有阻止按钮的默认行为，即表单提交，就会发生“一次点击两次提交”的情况。下面详细探讨两种常用的解决办法。 ### 解决方案一：更改按钮的type属性第一种...

jQuery第一次运行页面默认触发点击事件的实例

10-18

这是因为如果将触发代码放在函数内部，且该函数由某些动态事件触发（例如另一个元素的点击事件），那么在页面加载完毕时，动态触发函数可能还没有执行，因此无法保证在页面加载时立即执行点击事件。而放在函数外面，...

jquery绑定click事件出现第二次点击一次执行两次的问题

chengjianghao的博客

06-23

416

成功的触发事件，就会有多个事件存放，然后你点击时，就会触发你点击数目的事件。解决方法就是在成功后先取消事件（$('#id').unbind();），再执行事件。

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

一只爱吃糖的小羊

03-07

1万+

js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡本文博主遇到的问题：jquery中用.on()给页面中新加的元素添加点击事件时，点击事件源，绑定的事件执行两次，这里的alert会执行两次，相应地数组删除也执行两次，具体代码如下（其中.tabDel是页面加载之后新生成的元素，故不能用普通的$(‘.tabDel).click(function(){})的方法添加点...

解决js点击一次执行两次

chaitong2204的博客

08-30

1684

为什么会出现这种情况呢，明明点击了一次，可是控制台确输出了两次的内容，解决次方法将windows也就是浏览器默认的点击方法清除掉就欧克了 window.clearInterval(interval) ...

js click点击一次，执行多次的bug

散场前的温柔的博客

07-05

3063

click点击一次，执行多次的bug 原文链接： https://blog.csdn.net/GSCurry/article/details/71857127

jQuery点击click触发两次事件解决办法

bujiongqu1720的博客

07-05

1137

对于jQuery的js框架，大家都不陌生，但是有的是时候需要使用click函数进行事件的应用但是，有的时候点击一个div后出现了两次事件解决办法。 1.事件点击div触发两次事件办法 $("#myDiv").click(function(e){ e.stopPropagation(); //表示阻止向父元素冒泡 e.preventDefault(); //阻止方法阻止元素发...

解决jquery绑定click事件出现点击一次执行两次问题

weixin_30765505的博客

12-06

361

问题定位：通过浏览器F12定位到点击一次出现两次调用。问题复现： $("#mail_span").on("click",function(){ if($(".treeselect").children(".treeselect-up").css("display")=="none"){ treeSelectClick(); ...

jquery中click被执行两次的解决办法

oriency755的专栏

09-12

1万+

$(function () { $("#dj").click(function () { alert(3); }); }); 弹出了两次“3”，这个问题的解决办法如下： $(function () { $("#dj").unbind("click"

jquery的on绑定点击事件执行两次的解决办法

lijingjingjing22的博客

05-08

651

1、在用 on 绑定 click 事件之前，对该事件解绑， $('.right').off('click','.tabDel').on('click','.tabDel',function(){ }); 2、在on绑定的click事件执行之后进行解绑，用unbind()， $('.right').on('click','.tabDel',function(){ }); $('.right .tabDel').unbind('click');

js 点击多次只有一次有效

最新发布

08-12

<think>首先，用户的问题是："我想JavaScript中如何限制点击事件只触发一次请问JavaScript click event only trigger once"。翻译成英文是："How to make a JavaScript click event trigger only once?" 用户要求限制点击事件只触发一次，意思是当用户点击一个元素时，事件处理器只执行一次，之后不再执行。现在，回顾系统级指令： - 所有行内数学表达式使用$...$格式。 - 独立公式使用$$...$$并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 - 回答结构清晰，帮助用户逐步解决问题。 - 参考提供的引用内容。提供的引用内容是关于JavaScript事件的： - 引用[1]：关于.change()事件。 - 引用[2]：关于.select()事件。 - 引用[3]：包含一个测试用例，展示了如何使用.on和.once方法，以及原生addEventListener的once属性。 - 引用[4]：关于移除事件处理器。特别地，引用[3]直接相关，因为它提到了box.addEventListener('click', function(){ console.log(123); },{once:true})，这使用了once选项来让事件只触发一次。用户的问题是关于click事件的，所以引用[3]非常相关。我的回答需要： 1. 使用中文。 2. 结构清晰，逐步解释。 3. 自然地添加引用标识。 4. 在末尾生成相关问题。 5. 确保内容真实可靠。回答结构： - 先简要介绍如何实现。 - 然后逐步解释方法。 - 提供代码示例。 - 引用相关部分。 - 最后生成相关问题。关键方法： - 使用addEventListener的once选项：这是最直接的方式，在添加事件监听器时设置{once: true}。 - 使用once方法（如jQuery或自定义）：引用[3]中提到了m.once('click', function(){...})，这看起来是自定义事件系统的一部分。 - 手动移除事件监听器：在事件处理器中移除自己。由于用户提到了JavaScript，我应该优先介绍原生JavaScript方法。原生JavaScript方法： 1. 使用addEventListener的once选项（现代浏览器支持）。 2. 在事件处理器中移除监听器。引用[3]中的代码： - 它展示了原生方法：box.addEventListener('click', function(){...}, {once:true}) - 也展示了自定义Click类使用once。在回答中，我应该引用这个，因为它直接相关。回答步骤： 1. 介绍问题：如何让点击事件只触发一次。 2. 方法一：使用原生JavaScript的addEventListener的once选项。 - 解释语法。 - 提供示例代码。 - 引用[3]。 3. 方法二：手动移除事件监听器。 - 解释如何定义函数并在其中移除监听器。 - 提供示例。 4. 可选：提到库如jQuery的.one()方法（如果相关）。 - 但用户没有提到jQuery，所以优先原生。 5. 总结推荐方法。生成相关问题： - 基于主题，如其他事件类型、浏览器兼容性等。确保LaTeX：用户的问题中没有数学表达式，但如果有数学内容，使用$...$。这里可能不需要，除非有变量。代码块：使用代码块展示示例，如示例中的Python代码。最终回答结构： - 开头：直接回答问题。 - 主体：分步骤解释。 - 代码示例。 - 引用。 - 相关问题。</think>### JavaScript 中限制点击事件只触发一次的方法在 JavaScript 中，限制点击事件只触发一次是一个常见需求，常用于避免重复操作（如提交表单或执行一次性动画）。以下是两种可靠的方法，我会逐步解释，并提供代码示例。方法基于原生 JavaScript，确保兼容现代浏览器（如 Chrome、Firefox、Edge）。核心思路是：事件处理器在执行后自动移除或失效。 #### 方法一：使用 `addEventListener` 的 `once` 选项（推荐）这是最简洁的方式，利用了原生事件监听器的 `once` 属性。当设置为 `true` 时，事件处理器在首次触发后自动移除。 **步骤解释：** 1. 使用 `addEventListener` 添加点击事件监听器。 2. 在第三个参数中传入一个配置对象 `{ once: true }`。 3. 事件触发后，监听器自动解除绑定，后续点击无效。 **代码示例：** ```javascript // 获取元素 const button = document.getElementById('myButton'); // 添加事件监听器，设置 once: true button.addEventListener('click', function(event) { console.log('点击事件触发一次！'); // 这里可以添加你的业务逻辑，如提交表单 }, { once: true }); ``` - **优点**：代码简洁，无需手动管理移除逻辑。 - **缺点**：在旧版浏览器（如 IE）中不支持，需 polyfill 或备用方法。 - **引用**：此方法在原生 JavaScript 中直接支持，类似引用[3]中的测试用例，它使用了 `box.addEventListener('click', function(){...}, {once:true})` 实现一次性事件[^3]。 #### 方法二：手动移除事件监听器如果需兼容旧浏览器，可以在事件处理器内部移除监听器。这需要将函数定义为命名函数（非匿名函数），以便在内部引用自身。 **步骤解释：** 1. 定义一个命名函数作为事件处理器。 2. 在函数内部，使用 `removeEventListener` 移除自身绑定。 3. 添加事件监听器时，传入该函数。 **代码示例：** ```javascript // 获取元素 const button = document.getElementById('myButton'); // 定义事件处理器函数 function handleClickOnce(event) { console.log('点击事件触发一次！'); // 移除自身监听器 button.removeEventListener('click', handleClickOnce); // 这里可以添加你的业务逻辑 } // 添加事件监听器 button.addEventListener('click', handleClickOnce); ``` - **优点**：兼容所有浏览器（包括 IE9+）。 - **缺点**：代码稍冗余，需确保函数正确引用。 - **引用**：此方法类似于事件处理器管理，引用[4]提到移除处理器的概念，但需手动实现[^4]。 #### 额外方法：使用库（如 jQuery）如果项目使用 jQuery，可以利用其 `.one()` 方法简化操作： ```javascript $('#myButton').one('click', function() { console.log('点击事件触发一次！'); }); ``` - **优点**：语法更简洁，适合 jQuery 项目。 - **缺点**：依赖外部库，原生方案更轻量。 ### 总结 - **推荐方法**：优先使用 `addEventListener` 的 `once` 选项（方法一），它高效且现代。 - **兼容性注意**：`once` 选项在 IE 中不支持，但可通过 polyfill（如 `EventTarget.prototype.addEventListener` 的垫片）或备用方法（方法二）解决。 - **最佳实践**：在事件处理器中避免副作用，确保逻辑幂等。测试时，使用浏览器开发者工具检查事件绑定状态。如需更多帮助，请提供具体代码上下文！