Click function executes current and previous functions code

Question

My problem is that the .click functions are like "bubbling" up. For example, if I stay on hand1, it goes to the hitOrStay2 for hand2, which is correct. However, if I click the hit button to hit on hand2, it hits on both hand1 and hand2, instead of just hand2. If I stay on both hand1 and hand2, but hit on hand3, it hits on all 3 hands.

Important Note. Yes I did have only 1 hitOrStay function and 1 tableOptions function, but it was doing the same thing. After messing around trying to fix it, I decided to have a different function for each of the 3 hands. However, the .hit, .stay html buttons are still the same, only one of each.

If I can't fix this, I guess my only option would be to create separate hit and stay buttons for each hand, with different ID's/classes...?

Here's my js/jQuery code: (I'm not looking for anyone to provide a working example, since there's too much that goes into this. I'd just like to know why this is happening. What are some ways to go about fixing it. Etc.)

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

Pointy · Accepted Answer · 2013-12-26 15:36:45Z

3

Calling .click() does not remove other event handlers previously added. You can use .off() (preferred in new versions of jQuery) or .unbind().

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

answered Dec 26, 2013 at 15:36

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Teja Kantamneni · Accepted Answer · 2013-12-26 15:42:34Z

2

You can use unbind to remove all click events before adding the new events.

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

this code snippet removes all the click events on that element. To make sure you are not unbinding other events, its always a good practice to have them in a namespace and bind/unbind only events in those namespace.

answered Dec 26, 2013 at 15:42

Teja Kantamneni

17.5k12 gold badges58 silver badges86 bronze badges

Comments

CRABOLO · Accepted Answer · 2013-12-30 05:19:59Z

1

Here's how I got it to work

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

answered Dec 30, 2013 at 5:19

CRABOLO

8,82439 gold badges47 silver badges68 bronze badges

Collectives™ on Stack Overflow

Click function executes current and previous functions code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related