使用JS（JQ）出現(xiàn)重復(fù)POST的怪異情況

在項(xiàng)目中自己設(shè)定了一個(gè)功能類似js原生confirm的功能，主要是給用戶在操作的時(shí)候做二次確認(rèn)，這個(gè)提示結(jié)構(gòu)大致如下：

        <div>
            <div>
                <ul>
                    <li id="tsy1">提示語(yǔ)1</li>
                    <li id="tsy2">提示語(yǔ)2</li>
                    <li id="tsy3">提示語(yǔ)3</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li id="cancel">取消</li>
                    <li id="yes">確定</li>
                </ul>
            </div>
        </div>

這個(gè)是全站公用的，需要的時(shí)候就通過(guò)調(diào)用函數(shù)讓它顯示并傳入對(duì)應(yīng)的提示語(yǔ)之類的，通用調(diào)用函數(shù)大致如下：

function show(tsy1,tsy2,tsy3){
    document.getElementById("tsy1").innerHTML=cf1;
    document.getElementById("tsy2").innerHTML=cf2;
    document.getElementById("tsy3").innerHTML=cf3;
};

調(diào)用 show("提示語(yǔ)1","提示語(yǔ)2","提示語(yǔ)3"); 顯示對(duì)應(yīng)提示，然后用

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

向后臺(tái)POST數(shù)據(jù)

出現(xiàn)的問(wèn)題情況是這樣的：

當(dāng)我因某個(gè)操作調(diào)用到這個(gè)函數(shù)時(shí)，那么上面的HTML就顯示了(通過(guò)CSS的display屬性控制)，會(huì)有“取消”和“確定”兩個(gè)按鈕可選擇，正常情況就是我點(diǎn)擊“確定”就Ajax向后臺(tái)POST數(shù)據(jù)然后返回對(duì)應(yīng)結(jié)果

但是

假如我手賤，我調(diào)用這個(gè)函數(shù)后，我沒點(diǎn)擊“確定”，而是點(diǎn)擊了“取消”，然后我再次調(diào)用這個(gè)函數(shù)，再點(diǎn)擊“取消”，然后我再次調(diào)用這個(gè)函數(shù)，再點(diǎn)擊“取消”，然后我再次調(diào)用這個(gè)函數(shù)，再點(diǎn)擊“取消”.....

如此反復(fù)調(diào)用反復(fù)取消N次之后，我才點(diǎn)擊“確定”，奇怪的是發(fā)生了，這時(shí)點(diǎn)擊“確定”就向后臺(tái)POST了N次?。?！

為啥會(huì)這樣呢？

難道是每次調(diào)用函數(shù)的時(shí)候都新增一個(gè)"id=yes"?

回答

編輯回答

陪她鬧

你是不是每次調(diào)用一次函數(shù)都綁定一次事件？
最好把你的js代碼截全點(diǎn)兒

2017年1月17日 07:42

編輯回答

玩控

謝邀！
首先恭喜您已解決該問(wèn)題！
導(dǎo)致該問(wèn)題的原因是多次綁定導(dǎo)致的！
解決辦法很多：

// 方法一
$('#yes').off('click').on('click',function () {});

// 方法二
$('#yes').unbind().click(function() {});

// 方法三
$('#yes').one('click',function(){});

2018年3月11日 04:14

編輯回答