jquery click事件被多次执行？

最新推荐文章于 2023-12-08 11:05:38 发布
最新推荐文章于 2023-12-08 11:05:38 发布
阅读量6k 收藏
点赞数 1
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gundumw100/article/details/69993029
版权
用jquery绑定一个按钮click事件后，第一次点击后，一切正常，第二次点击，竟然执行两次，以后越来越多。
后来查看文档发现  jquery click  不是替换原有的function ，而是接着添加，所以才会执行次数越来越多。 这有就可以在添加之前先将按钮click函数置空，然后再添加。
解绑定方法   $("...").unbind('click');

自 jQuery 版本 1.7 起，on() 和 off() 方法是在元素上添加和移除事件处理程序的首选方法。

所以也可以写成：

$("...").off("click").on("click",onXXXClick);



在JQM中，如果要对一个按钮添加事件，最好写在pagebeforecreate或pagecreate中，而不要写在"pagebeforeshow"或"pageshow"中。
原因:如果把事件的绑定写在"pageshow"中,因为"pageshow"每次页面显示的时候都会触发,所以这样当一个页面多次显示的时候就会造成一个事件绑定多次的情况。
JQuery触发两次事件的问题及解决方案
CsCufft的博客
09-22 1095
JQuery触发两次事件的问题通常是由事件重复绑定所导致的。在使用JQuery时，有时会遇到触发两次事件的情况，这可能会导致意外的结果或不良用户体验。本文将详细介绍这个问题的原因，并提供解决方案的源代码示例。造成事件被触发两次的原因通常是事件的重复绑定。当代码中存在多个相同的事件绑定时，每次事件发生时，都会触发所有的绑定处理程序，从而导致事件被执行多次。希望本文的解决方案能帮助您解决JQuery触发两次事件的问题！下面是一些可能的解决方案，可以帮助您解决JQuery触发两次事件的问题。
JQuery给元素绑定click事件多次执行的解决方法
10-25
总结，解决jQuery元素`click`事件多次执行的问题，你可以： 1. 使用`unbind`或`off`方法在绑定新事件前解除旧事件。 2. 为事件处理函数添加命名空间，以便精确解绑。 3. 使用事件委托，尤其是在处理动态添加的元素...
Jquery点击事件连续执行多次
lyq8778的博客
09-02 1651
jquery重复执行
jQuery的click事件一次点击执行多次的原因与解决办法
zhuimenghou的博客
08-14 4412
在js中，使用了jQuery的$("#id").on(“click”,function(e) {}方法，而且在js中，方法声明如下 function orderCancle() { $("#id").on(“click”,function(e) {} } 而且这个方法在多个ajax返回成功后，被多次调用，即多次执行了 orderCancle() ； 最后点击的时候，出现了点击一次触发多次click事件的结果。查了资料才发现，jquery的click 不是 替换原有的function，而是接着添加。 解决办
jquery简单的小项目(我的农场)&jquery单击事件&事件一次点击多次触发解决方法
qq_44784185的博客
10-24 417
写项目的时候会遇到各种问题，写这个项目我就遇到一次点击多次触发多次单击事件的问题，这种问题是因为你多次为这个控件（元素/标签）添加相同的事件，做事要有始有终，代码也是这样，当你为一控件多次添加一个事件时，他并不是把上一个事件替换了，而是在上一个事件的基础上叠加了，所以在为控件多次添加事件时要删除已有的事件 $('#bg').off() 我的农场 ⬇ 代码展示 css代码 <style&...
JQuery 给元素绑定click事件多次执行的解决方法
10-25
本篇文章将详细介绍如何解决jQuery中元素click事件多次执行的问题。 首先，我们需要理解jQuery中的事件绑定机制。jQuery提供了`.on()`方法来绑定事件，例如： ```javascript $("#sdfsd").on("click", function(e) ...
Jquery on方法绑定事件后执行多次的解决方法
10-22
总结来说，通过事件委托和在绑定事件前解除已存在的事件处理器，我们可以有效防止事件处理器因为元素重复添加而导致的多次执行问题。这不仅可以提升应用的性能，还可以避免因为多次触发事件处理器而可能引发的其他...
jquery Click事件点击一次，执行多次原因之一
weixin_34239169的博客
11-27 299
用jquery 绑定一个按钮click事件后，第一次点击后，一切正常，第二次点击，竟然执行两次，以后越来越多。后来查看文档发现 jquery click 不是 替换原有的function 而是接着添加，所以才会执行次数越来越多。function noteSubmit(contentObj){//点击发送按钮事件$('.noteBtn').on('clic...
[问题记录]--jquery中click事件的累加绑定，点击一次，执行多次
weixin_56374326的博客
12-08 1153
在页面中为一个元素绑定事件，事件执行后页面未刷新且元素还在，然后再次点击，元素又被绑定个点击事件，这样第二次点击就会执行两次。，为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次。出现问题，第一次编辑后点击确定正常修改，再次修改第一个内容，发现第二个也会变。
Jquery on(“click“) 方法绑定事件后执行多次解决办法
孙三苗的专栏
04-29 4088
一、发现问题 在开发过程中，无意发现页面弹窗按钮的点击事件使用on函数绑定click 时，产生多次请求，从而可能会造成不必要的资源消耗。 举例： 页面按钮： 代码片段： let drBox = $('#choiceDetailPopup'), // 提交 console.log("submitTask start"); drBox.on('click','#submitTask',function(){ console.log("submitTask click"); // 处理自己.
JQuery绑定click事件，点击一次正常，多次点击调用多次，累计次数。
Nuist_ZHJ的博客
03-30 1455
用jquery  绑定一个按钮click事件后，第一次点击后，调用一次功能，第二次点击，执行两次，以后越来越多。原因：  jquery click  不是 替换原有的function  而是接着添加，所以才会执行次数越来越多。 这有就可以在添加之前 先将按钮 click 函数置空，然后再添加。 解绑定方法   $("").unbind('click');原文地址：https://blog.csdn...
jquery的click事件一次绑定多次执行解决方案
qq_30434271的博客
11-21 675
今天遇到个奇怪的现象，jsp里对按钮绑定了click事件，但是经过debugger调试，业务代码反复执行，后面排查到是jquery的click事件重复绑定引起的。$.('***元素').unbind('click').bind('click', '***事件')
点击事件执行两次的解决办法
qq_43386335的博客
03-03 1740
出现点击事件执行两次的原因就是事件冒泡，根据需求这里给出两种解决方法： 1.return false 2.event.stopPropagation() 两种方法是有区别的： event.stopPropagation()会阻止事件往上冒泡，但并不阻止事件本身； return false 则是既阻止了事件往上冒泡又阻止了事件本身。 ...
解决jquery绑定click事件出现点击一次执行两次问题
热门推荐
star的博客
10-24 1万+
问题定位：通过浏览器F12定位到点击一次出现两次调用。 问题复现： $("#mail_span").on("click",function(){         if($(".treeselect").children(".treeselect-up").css("display")=="none"){             treeSelectClick();           
jQuery点击click触发两次事件解决办法
搬山境KL攻城狮的修炼手册
11-19 1905
jQuery点击click触发两次事件解决办法 方法一、阻止默认行为 $("#myDiv").click(function(e){ e.stopPropagation(); //表示阻止向父元素冒泡 e.preventDefault(); //阻止 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交或者a标签）。 }); 方法二、取消默认行为 $("#myDiv").unbind('click').click(function(){ // 业务逻辑 }); ...
jquery阻止bootstrap模态框多次执行ajax
最新发布
09-15
在使用jQuery和Bootstrap框架开发网页时，我们可能会遇到在模态框中多次触发同一事件导致多个Ajax请求被同时发送的情况。为了防止这种情况发生，我们可以在发送Ajax请求前对模态框进行一些控制，以阻止用户在等待Ajax响应时重复触发事件。 一个常见的做法是使用Bootstrap提供的数据属性来控制模态框的状态。在打开模态框前，可以通过设置模态框的`data`属性来标记已经打开，然后在Ajax请求结束后清除这个状态。这样，当用户尝试再次触发事件时，我们可以通过检查这个标记来决定是否需要执行后续操作。 以下是一个简单的示例代码： ```javascript // 假设这是一个触发模态框的按钮的点击事件处理函数 $('#myButton').on('click', function () { // 检查模态框是否已经打开 if ($('#myModal').data('is-opening')) { return; // 如果已经打开，则不执行后续操作 } // 标记模态框正在打开 $('#myModal').data('is-opening', true); // 显示模态框 $('#myModal').modal('show'); // 发送Ajax请求 $.ajax({ url: 'your-endpoint-url', method: 'POST', // ...其他ajax选项 success: function (response) { // 处理成功的响应 // ... // 清除标记 $('#myModal').data('is-opening', false); }, error: function (xhr) { // 处理错误情况 // ... // 清除标记 $('#myModal').data('is-opening', false); } }); }); ``` 在上面的示例中，我们使用了`data('is-opening')`来检查模态框是否正在打开。这是一个简单的标志位，你可以根据实际情况进行调整或扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值