Question

我的问题是.click函数就像“冒泡”了。例如，如果我留在hand1，则会转到hitOrStay2 hand2，这是正确的。但是，如果我点击点击按钮以点击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');

Answer 2

在添加新活动之前，您可以使用unbind删除所有click个事件。

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

此代码段会删除该元素上的所有点击事件。为了确保您没有解除其他事件的绑定，将它们放在命名空间中只是一个好习惯，而bind/unbind只在这些命名空间中发生事件。

Answer 3

以下是我如何使用它

if (x < 19) {
    $(choicemessage).appendTo('.message');
    $('.hit, .stay').fadeIn();
    $('.hit').on('click', function() {
        $('.hit, .stay').hide().off();
        cards.push(dealone(hand));
        $('.message').find('.choicemessage').detach();
        hitOrStay(cards, hand);
    });
    $('.stay').on('click', function() {
        $('.hit, .stay').hide().off();
        $('.message').find('.choicemessage').detach();
        if (nHands > 1) {
           tableOptions2(nHands); }
    });
    }

Click函数执行当前和以前的函数代码

3 个答案: