点击按钮发送多次请求解决方案

前几天工作中遇到一个问题,在做使用余额支付的时候,点击立即购买按钮会出现一个弹层要求输入支付密码,输完之后点击确认发送请求。但是在测试的时候发现,在使用余额支付的时候,第几次购买就会发送几次请求,类似于事件叠加。

一开始实现的思路大概就是,点击立即支付按钮判断支付方式是支付宝支付、微信支付还是余额支付,如果是余额支付,则弹出层显示,并输入密码,同时将密码存放在一个变量里,点击确认的时候发送请求。

这里写图片描述

在发现问题之后我把逻辑捋了好几遍并没有发现什么问题。
但是在审查元素,查看元素绑定事件的时候发现,没点一次确定,这个按钮就在原来的基础上添加了一个点击事件。

这里写图片描述

后面我突然想到原来是执行了两次click事件的结果,每次先加载的数据,加载完毕后就被绑定click事件一次,后加载的数据加载完毕后,之前先加载的数据再次被绑定一次click事件。

解决方案:

  1. 元素点击后删除,然后再动态创建一个元素,再添加点击事件。显然这个方式很麻烦。
  2. 使用jquery的one()方法,为元素绑定一个一次性的事件处理函数,这个事件处理函数只会被执行一次。
 $(".sure").one("click",function(){
   alert("执行"); 
 })
  1. 在每次绑定点击事件前先解除之前的事件绑定,再为元素绑定事件,类似于先清空,在做操作一样。但你使用bind()方法绑定时,可以用unbind()方法解除绑定。通常我们跟愿意用on()方法绑定事件,因为bind()方法已经不被推荐,那么那么就用off()方法解除事件绑定。
 $("#adsCollection_tb").unbind("click").bind("click",function(){
     alert("执行"); 
  });
  $("#adsCollection_tb").off("click").on("click",function(){
     alert("执行"); 
 })

这些是我后来查到的解决方案,当时在解决这个问题的时候我没想到这么多,就想既然在点击事件里再写一个点击事件,会不会是因为点击事件不可以嵌套的问题,所以我就吧支付密码弹出层的点击确认事件写在了立即购买点击事件的外边。

这里写图片描述

展开阅读全文

没有更多推荐了,返回首页