使用JS（JQ）出现重复POST的怪异情况

Question

在项目中自己设定了一个功能类似js原生confirm的功能，主要是给用户在操作的时候做二次确认，这个提示结构大致如下：

这个是全站公用的，需要的时候就通过调用函数让它显示并传入对应的提示语之类的，通用调用函数大致如下：

function show(tsy1,tsy2,tsy3){

    document.getElementById("tsy1").innerHTML=cf1;

    document.getElementById("tsy2").innerHTML=cf2;

    document.getElementById("tsy3").innerHTML=cf3;

};

调用 show("提示语1","提示语2","提示语3"); 显示对应提示，然后用

$('#yes').click(function() {}

向后台POST数据

出现的问题情况是这样的：

当我因某个操作调用到这个函数时，那么上面的HTML就显示了(通过CSS的display属性控制)，会有“取消”和“确定”两个按钮可选择，正常情况就是我点击“确定”就Ajax向后台POST数据然后返回对应结果

但是

假如我手贱，我调用这个函数后，我没点击“确定”，而是点击了“取消”，然后我再次调用这个函数，再点击“取消”，然后我再次调用这个函数，再点击“取消”，然后我再次调用这个函数，再点击“取消”.....

如此反复调用反复取消N次之后，我才点击“确定”，奇怪的是发生了，这时点击“确定”就向后台POST了N次！！！

为啥会这样呢？

难道是每次调用函数的时候都新增一个"id=yes"?

Answer 1

$('#yes').unbind().click(function() {}试试这个

Answer 2

首先恭喜您已解决该问题！导致该问题的原因是多次绑定导致的！解决办法很多：// 方法一$('#yes').off('click').on('click',function () {});// 方法二$('#yes').unbind().click(function() {});// 方法三$('#yes').one('click',function(){});