Bootstrap隐藏模式和显示其他模式事件触发错误

Question

我在模态中有一个按钮，它在加载时显示，名为.giveawayApplyNow。点击后执行以下代码：

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

此代码关闭当前模态并显示一个新的模态。这很好用。

我遇到的问题是，我在同一模态.giveawayClose上有一个关闭图标。如果我使用.giveawayApplyNow打开新模态，然后关闭该模态，通过单击"；了解更多"；按钮.learnMorebtn并再次调出原始模态，当单击.giveawayClose按钮时，它正在执行我的$('.giveawayApplyNow').click(function()，它关闭当前模态并打开第二个模态，而不仅仅是关闭模态。

为什么会这样？

EDIT：刚刚意识到这不仅仅是基于点击关闭按钮，而是在任何时候以任何方式关闭赠品模式时都会触发(例如点击模式外关闭它(

$( 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>  
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="applyNowbtn">Apply Now</div>
<div class="learnMorebtn">Learn More</div>

<!-- Giveaway Popup -->    
<div class="modal fade" id="GiveawayModal" tabindex="-1" role="dialog" aria-labelledby="GiveawayModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="giveawayHands">
<img src="img/giveaway-close.svg" class="Close giveawayClose">
<div class="giveawayTitle">HANDEE’S $1000<br>WE’RE IN THIS TOGETHER<br>GIVEAWAY</div>
<div class="giveawayOrange">
<div class="giveawayOrangeTop">WE WANT TO THANK THE HANDEE COMMUNITY FOR SUPPORTING OUR LOCAL BUSINESS. APPLY NOW FOR YOUR CHANCE TO WIN</div>
<div class="giveawayOrangeBottom">ONE LUCKY HANDEE LOANS CLIENT WILL BE SELECTED EACH MONTH UNTIL THE END OF 2020 TO WIN $1000*</div>
</div>
<div class="giveawayFineprint">*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.</div>
</div>
<div class="giveawayApplyNow">Apply Now</div>
</div>
</div>
</div>
</div> 


<!-- Eligibility Popup -->    
<div class="modal fade" id="EligibilityModal" tabindex="-1" role="dialog" aria-labelledby="EligibilityModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="img/giveaway-close.svg" class="Close eligibilityClose">
<div class="container">
<div class="row eligibilityTopMargin">
<div class="col-lg-6 orangeBorderRight">
<div class="eligibilityBtn">New Client</div>
<h6 class="eligibilitybtnSub">I have not had a loan previously with Handee Loans</h6>
</div>
<div class="col-lg-6">
<div class="eligibilityBtn">Existing Client</div>
<h6 class="eligibilitybtnSub">I have previously been approved for a loan with Handee Loans</h6>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="AreYouEligible">Are you eligible?</div>
<img class="eligibleTick" src="img/orangeTick.svg">
<div class="eligibleTickText">I'm a permanent Australia resident.</div><br>
<img class="eligibleTick" src="img/orangeTick.svg">
<div class="eligibleTickText">I'm paid $500 or more a week into my bank account.</div><br>
<img class="eligibleTick" src="img/orangeTick.svg">
<div class="eligibleTickText">I'm not in bankruptcy or part 9 agreement.</div>
</div> 
</div>
<div class="row" style="margin-top: 40px;">
<div class="col-lg-12">
<img src="img/orangeWarning.svg" class="warningIcon">
<div class="warningText">WARNING: DO YOU REALLY NEED A LOAN TODAY?*</div><br>
<div class="eligibilityInfo">
It can be expensive to borrow small amounts of money and borrowing may not solve your money problems.<br><br>
Check your options <u>before</u> you borrow:   <ul class="eligibilityList">
<li>For information about other options for managing bills and debts, ring <a href="tel:[phone]">1800 007 007</a> from anywhere in Australia to talk to a free and independent financial counsellor.</li>
<li>Talk to your electricity, gas, phone or water provider to work out a payment plan.</li>
<li>If you are on government benefits, ask for an advance payment from Centrelink:<br> <a href="https://www.humanservices.gov.au/advancepayments" target="_blank">www.humanservices.gov.au/advancepayments</a>
</li>
</ul>
The Government’s <a href="https://moneysmart.gov.au">MoneySmart Website</a> shows you how small amount loans work and suggests other options that may help you.    
</div>
<div class="eligibilityFineprint">
* This statement is an Australian Government requirement under the National Consumer Credit Protection Act 2009.</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>

Answer 1

.on('hidden.bs.modal',...)事件添加了一个事件侦听器，该侦听器在每次关闭#GiveawayModal时都会被触发。

你似乎只想让这种情况发生一次(如果点击了"了解更多"按钮(。也许可以使用jQuery.one(...)方法而不是on(...)来只添加事件侦听器，然后在只触发一次后将其删除。