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

Question

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

        <div>
            <div>
                <ul>
                    <li id="tsy1">提示语1</li>
                    <li id="tsy2">提示语2</li>
                    <li id="tsy3">提示语3</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li id="cancel">取消</li>
                    <li id="yes">确定</li>
                </ul>
            </div>
        </div>    

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

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(){});

Answer 3

你是不是每次调用一次函数都绑定一次事件？
最好把你的js代码截全点儿