Bootstrap Hide modal and Show other modal event triggering incorrectly

Question

I have a button in the modal that appears onload called .giveawayApplyNow. On click the following code executes:

$('.giveawayApplyNow').click(function() {
    $('#GiveawayModal').modal('hide');
    $('#GiveawayModal').on('hidden.bs.modal', function () {
        $('#EligibilityModal').modal('show');
    });
});

This code closes the current modal and shows a new one. This works fine.

The issue that I am having is that I have a close icon on that same modal .giveawayClose. If I use the .giveawayApplyNow to open up the new modal, then close that modal, reopen the first modal by clicking the "Learn more" button .learnMorebtn and bring up the original modal again, when clicking the .giveawayClose button, it is executing my $('.giveawayApplyNow').click(function() which closes the current modal and opens the second one, instead of just closing the modal.

Why is this?

EDIT: Just realized that this not just based on clicking the close button but is triggered whenever close the giveaway modal in any way (for example clicking outside the modal to close it)

$( window ).on( "load", function() { 
    $('#GiveawayModal').modal();
    
});


$('.learnMorebtn').click(function() {
    $('#GiveawayModal').modal('show');
});

$('.giveawayClose').click(function() {
    $('#GiveawayModal').modal('hide');
});

$('.applyNowbtn, .secondaryheadingBtn').click(function() {
    $('#EligibilityModal').modal('show');
});

$('.eligibilityClose').click(function() {
    $('#EligibilityModal').modal('hide');
});

$('.giveawayApplyNow').click(function() {
    $('#GiveawayModal').modal('hide');
    $('#GiveawayModal').on('hidden.bs.modal', function () {
      $('#EligibilityModal').modal('show');
    });
    console.log('wuzi');
});

/* Modals */

.modal { overflow: auto !important; }

.modal-open {
  padding-right:0 !important;
}

.modal-lg {
    width: 90% !important;
    max-width: 1200px !important;
    
}

@media (max-width: 575px) { 
    .modal-lg {
        margin: 15px auto;    
    }
}

.modal-content {
    border-radius: 12px;
    border: none;
    
}

/* Giveaway Modal */

#GiveawayModal .modal-body {
    padding: 25px;
}


.giveawayHands {
    background-image: url('img/giveaway_popup_hands.jpg');
    background-size: cover;
    background-position: center center;
    border-radius: 12px;
    width: 100%;
    position: relative;
    
}

.Close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    cursor: pointer;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}

.Close:hover {
  -webkit-animation-name: Close;
  animation-name: Close;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes Close {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes Close {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

.giveawayTitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 64px;
    color: #191f4c;
    text-align: center;
    margin-bottom: 400px;
    margin-top: 40px;
    display: inline-block;
    width: 100%;
}

.giveawayOrange {
    background-color: rgba(242,101,34,0.78);
    border-radius: 12px;
    margin: 25px;
    color: white;
    text-align: center;
    padding: 15px;
}

.giveawayOrangeTop {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 25px;
    margin-top: 5px;
}

.giveawayOrangeBottom {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 19px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.giveawayFineprint {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    margin: 0 25px 15px;
    color: black;
}

.giveawayApplyNow {
    background-color: #008e39;
    color: white;
    border-radius: 12px;
    text-transform: uppercase;
    font-size: 34px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-align: center;
    padding: 10px;
    min-width: 287px;
    width: 25%;
    cursor: pointer;
    border: 3px solid #008e39;
    margin: 20px auto 10px;
    transition: color .3s, background-color .3s;    
}

.giveawayApplyNow:hover {
    background-color: white;
    color: #008e39;
}

@media (max-width: 1288px) {     
    .giveawayTitle {
        margin-bottom: 450px;
    }
}

@media (max-width: 1080px) {     
    .giveawayTitle {
        margin-bottom: 15px;
    }
}


@media (max-width: 767px) { 
    .giveawayHands {
        max-height: 841px;
    }
    
    .giveawayClose {
        width: 40px;
        top: 15px;
        right: 15px;
    }
}

@media (max-width: 714px) { 
    .giveawayTitle {
        font-size: 60px;
    }
}

@media (max-width: 620px) { 
    .giveawayTitle {
        font-size: 40px;
        margin-top: 60px;
    }
    
    .giveawayOrangeTop {
        font-size: 20px;
    }
    
    .giveawayOrangeBottom {
        font-size: 16px;
    }
}

@media (max-width: 418px) { 
    .giveawayTitle {
        font-size: 30px;
    }
    
    .giveawayOrangeTop {
        font-size: 17px;
    }
    
    .giveawayOrangeBottom {
        font-size: 15px;
    }
}

/* Eligible Modal */

.eligibilityTopMargin {
    margin-top: 80px;
}

.orangeBorderRight {
    border-right: 3px solid #f26522;
}

.eligibilityBtn {
    background-color: #008e39;
    color: white;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 34px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-align: center;
    padding: 5px;
    min-width: 287px;
    width: 65%;
    cursor: pointer;
    border: 3px solid #008e39;
    margin: 60px auto 40px;
    transition: color .3s, background-color .3s;
}

.eligibilityBtn:hover {
    color: #008e39;
    background-color: white;
}


.eligibilitybtnSub {
    min-width: 287px;
    width: 65%;
    text-align: center;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    margin: auto;
    margin-bottom: 20px;
}

.AreYouEligible {
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 29px;
    border-radius: 12px;
    background-color: #f7941d;
    color: white;
    padding: 5px 20px;
    margin-top: 80px;
    margin-bottom: 30px;
}

.eligibleTick {
    width: 30px;
    display: inline-block;
    margin-bottom: 20px;
    vertical-align: top;
}

.eligibleTickText {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: black;
    display: inline-block;
    padding-left: 10px;
}

.warningIcon {
    width: 60px;
    display: inline-block;
    margin-bottom: 20px;
}

.warningText {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 35px;
    color: #f26522;
    display: inline-block;
    padding-left: 10px;
}


.eligibilityInfo {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: black;
}

.eligibilityInfo a {
    color: #f26522;
}

.eligibilityInfo a:hover {
    text-decoration: underline;
}

.eligibilityList li {
    margin-top: 10px;
    margin-bottom: 10px;
}

.eligibilityFineprint {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    margin: 20px auto 60px;
}



      
    
  
Apply Now
Learn More



    

    
        
            
                
                    
                    HANDEE’S $1000
WE’RE IN THIS TOGETHER
GIVEAWAY
                    
                        WE WANT TO THANK THE HANDEE COMMUNITY FOR SUPPORTING OUR LOCAL BUSINESS. APPLY NOW FOR YOUR CHANCE TO WIN
                        ONE LUCKY HANDEE LOANS CLIENT WILL BE SELECTED EACH MONTH UNTIL THE END OF 2020 TO WIN $1000*
                    
                    *To be eligible you must be approved for a Handee Loan during the months of the competition. Competition runs from 1st July 2020 to 31st December 2020. Winner for each month will be announced after the month has ended.
                
                Apply Now
            
        
    
 
    
    
    

    
        
            
                
                
                    
                        
                            New Client
                            I have not had a loan previously with Handee Loans
                        
                        
                            Existing Client
                            I have previously been approved for a loan with Handee Loans
                        
                    
                    
                        
                            Are you eligible?
                            
                            I'm a permanent Australia resident.


                            
                            I'm paid $500 or more a week into my bank account.


                            
                            I'm not in bankruptcy or part 9 agreement.
                         
                    
                    
                        
                            
                            WARNING: DO YOU REALLY NEED A LOAN TODAY?*


                            
                            It can be expensive to borrow small amounts of money and borrowing may not solve your money problems.


                            Check your options before you borrow:   
                                For information about other options for managing bills and debts, ring 1800 007 007 from anywhere in Australia to talk to a free and independent financial counsellor.
                                Talk to your electricity, gas, phone or water provider to work out a payment plan.
                                If you are on government benefits, ask for an advance payment from Centrelink:
 www.humanservices.gov.au/advancepayments
                                
                            
                            The Government’s MoneySmart Website shows you how small amount loans work and suggests other options that may help you.    
                            
                            
                            * This statement is an Australian Government requirement under the National Consumer Credit Protection Act 2009.

Rohan B · Accepted Answer

The .on('hidden.bs.modal',...) event adds an event listener that is triggered every time that #GiveawayModal is closed.

It seems like you want to only have this happen once (if the learn more button is clicked). Maybe use the jQuery .one(...) method instead of on(...) to only add the event listener and then remove it after it has been triggered only one time.

Bootstrap Hide modal and Show other modal event triggering incorrectly

Answers (1)

Related Questions