javascript - 单击函数执行当前和先前的函数代码

Question

我的问题是 .click 函数就像“冒泡”一样。例如，如果我停留在 hand1 上，它将转到 hand2 的 hitOrStay2，这是正确的。但是，如果我单击点击按钮来点击 hand2，它会同时点击 hand1 和 hand2，而不仅仅是 hand2。如果我同时停留在 hand1 和 hand2 上，但击中 hand3，则它会击中所有 3 只手。

重要说明。是的，我确实只有 1 个 hitOrStay 函数和 1 个 tableOptions 函数，但它在做同样的事情。经过一番尝试修复后，我决定为 3 只手分别设置不同的功能。但是，.hit、.stay html 按钮仍然相同，各只有一个。

如果我无法解决这个问题，我想我唯一的选择是为每只手创建单独的击中和停留按钮，并具有不同的 ID/类别...？

这是我的 js/jQuery 代码:(我不是在寻找任何人提供工作示例，因为涉及的内容太多。我只是想知道为什么会发生这种情况。什么是一些修复它的方法。等等)

function hitOrStay(cards, hand, nHands) {
   var x = addValueOfCards(cards);
   var rt = hand.classhtml.toString();
   var choicemessage = $('<p class="choicemessage">You have ' + (x) + '. Do you want to hit or stay?</p>');
    if (x < 19) {
        $(choicemessage).appendTo('.message');
        $('.hit, .stay').fadeIn();
        $('.hit').click(function() {
            $('.hit, .stay').hide();
            cards.push(dealone(hand));
            $('.message').find('.choicemessage').detach();
            hitOrStay(cards, hand);
        });
        $('.stay').click(function() {
            $('.hit, .stay').hide();
            $('.message').find('.choicemessage').detach();
            if (nHands > 1) {
               tableOptions2(nHands); }
        });
        }
    else {
        $('<p>You Busted</p>').appendTo('.message');
        $(rt).find('.crd').detach();
        if (nHands > 1) {
            tableOptions2(nHands); }
    }
}

function hitOrStay2(cards, hand, nHands) {
   var x = addValueOfCards(cards);
   var rt = hand.classhtml.toString();
   var choicemessage = $('<p class="choicemessage">You have ' + (x) + '. Do you want to hit or stay?</p>');
    if (x < 19) {
        $(choicemessage).appendTo('.message');
        $('.hit, .stay').fadeIn();
        $('.hit').click(function() {
            $('.hit, .stay').hide();
            cards.push(dealone(hand));
            $('.message').find('.choicemessage').detach();
            hitOrStay2(cards, hand);
        });
        $('.stay').click(function() {
            $('.hit, .stay').hide();
            $('.message').find('.choicemessage').detach();
            if (nHands > 2) {
               tableOptions3(nHands); }
        });
        }
    else {
        $('<p>You Busted</p>').appendTo('.message');
        $(rt).find('.crd').detach();
        if (nHands > 2) {
             tableOptions3(nHands); }
    }
}

function tableOptions(nHands) {
        hitOrStay(hand1.cards, hand1, nHands);  
}

function tableOptions2(nHands) {
        hitOrStay2(hand2.cards, hand2, nHands);
}

function tableOptions3(nHands) {
        hitOrStay3(hand3.cards, hand3, nHands);
}

Answer 1

调用.click()不会删除之前添加的其他事件处理程序。您可以使用 .off() (在新版本的 jQuery 中首选)或 .unbind()。

$('.hit').off('click');