Javascript 引导隐藏模式并显示其他模式事件触发错误

我在模式中有一个在加载时显示的按钮，名为

.giveawayApplyNow

。单击后，将执行以下代码：

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

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

我遇到的问题是，我在同一个模式

上有一个关闭图标。如果我使用
.giveawayApplyNow
打开新模式，然后关闭该模式，通过单击“了解更多”按钮
.learnMorebtn
重新打开第一个模式，并再次打开原始模式，当单击
.giveawayApplyNow
按钮时，它正在执行我的
$（'.giveawayApplyNow'）。单击（函数（）
关闭当前模式并打开第二个模式，而不仅仅是关闭模式

为什么会这样

编辑：刚刚意识到这不仅仅是基于单击关闭按钮，而是在以任何方式关闭赠品模式时触发（例如在模式外单击以关闭它）


$（窗口）.on（“加载”，函数（）{
$（'#GiveawayModal'）.modal（）；
});
$（'.learnMorebtn'）。单击（函数（）{
$（'GiveawayModal'）.modal（'show'）；
});
$（'.givawayclose'）。单击（函数（）{
$（'#GiveawayModal'）.modal（'hide'）；
});
$（'.applyNowbtn，.secondaryheadingBtn'）。单击（函数（）{
$（'EligibilityModal'）.modal（'show'）；
});
$（'.eligibilityClose'）。单击（函数（）{
$（'EligibilityModal'）.modal（'hide'）；
});
$（'.giveawayApplyNow'）。单击（函数（）{
$（'#GiveawayModal'）.modal（'hide'）；
$（'#GiveawayModal'）.on（'hidden.bs.modal'，function（）{
$（'EligibilityModal'）.modal（'show'）；
});
console.log（'wuzi'）；
})；
/*模态*/
.modal{溢出：自动！重要；}
.模态开放{
右边填充：0！重要；
}
.莫代尔lg{
宽度：90%！重要；
最大宽度：1200px！重要；
}
@介质（最大宽度：575px）{
.莫代尔lg{
利润率：15px自动；
}
}
.模态内容{
边界半径：12px；
边界：无；
}
/*赠品模式*/
#赠品模态。模态体{
填充：25px；
}
.赠品手{
背景图片：url（'img/giveway\u popup\u hands.jpg'）；
背景尺寸：封面；
背景位置：中心；
边界半径：12px；
宽度：100%；
位置：相对位置；
}
.结束{
位置：绝对位置；
顶部：20px；
右：20px；
宽度：50px；
光标：指针；
-webkit转换：透视图（1px）translateZ（0）；
变换：透视图（1px）translateZ（0）；
}
.关闭：悬停{
-webkit动画名称：关闭；
动画名称：关闭；
-webkit动画持续时间：0.15s；
动画持续时间：0.15s；
-webkit动画计时功能：线性；
动画计时功能：线性；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
}
@-webkit关键帧关闭{
50% {
-webkit变换：translateX（3px）旋转（2deg）；
变换：translateX（3px）旋转（2deg）；
}
100% {
-webkit变换：translateX（-3px）旋转（-2deg）；
变换：translateX（-3px）旋转（-2deg）；
}
}
@关键帧关闭{
50% {
-webkit变换：translateX（3px）旋转（2deg）；
变换：translateX（3px）旋转（2deg）；
}
100% {
-webkit变换：translateX（-3px）旋转（-2deg）；
变换：translateX（-3px）旋转（-2deg）；
}
}
.赠品{
字体系列：“开放式Sans”，无衬线；
字号：800；
字体大小：64px；
颜色：#191f4c；
文本对齐：居中；
边缘底部：400px；
边缘顶端：40px；
显示：内联块；
宽度：100%；
}
.giveawayOrange{
背景色：rgba（242101,34,0.78）；
边界半径：12px；
利润率：25px；
颜色：白色；
文本对齐：居中；
填充：15px；
}
.赠品{
字体系列：“开放式Sans”，无衬线；
字号：800；
字体大小：25px；
边缘顶部：5px；
}
.赠品{
字体系列：“开放式Sans”，无衬线；
字号：700；
字号：19px；
边缘顶部：15px；
边缘底部：5px；
}
.giveawayFineprint{
字体系列：“开放式Sans”，无衬线；
字号：700；
字体大小：14px；
文本对齐：居中；
显示：内联块；
利润率：0 25px 15px；
颜色：黑色；
}
.giveawayApplyNow{
背景色：#008e39；
颜色：白色；
边界半径：12px；
文本转换：大写；
字体大小：34px；
字体系列：“开放式Sans”，无衬线；
字号：800；
文本对齐：居中；
填充：10px；
最小宽度：287px；
宽度：25%；
光标：指针；
边框：3px实心#008e39；
利润率：20px自动10px；
过渡色：颜色.3s，背景色.3s；
}
.giveawayApplyNow:悬停{
背景色：白色；
颜色：#008e39；
}
@介质（最大宽度：1288px）{
.赠品{
边缘底部：450px；
}
}
@介质（最大宽度：1080px）{
.赠品{
边缘底部：15px；
}
}
@介质（最大宽度：767px）{
.赠品手{
最大高度：841px；
}
.赠品{
宽度：40px；
顶部：15px；
右：15px；
}
}
@介质（最大宽度：714px）{
.赠品{
字体大小：60px；
}
}
@介质（最大宽度：620px）{
.赠品{
字体大小：40px；
边缘顶部：60像素；
}
.赠品{
字体大小：20px；
}
.赠品{
字体大小：16px；
}
}
@介质（最大宽度：418px）{
.赠品{
字体大小：30px；
}
.赠品{
字号：17px；
}
.赠品{
字体大小：15px；
}
}
/*合格模态*/
.eligibilityTopMargin{
边缘顶部：80px；
}
.橙红色{
右边框：3px实心#f26522；
}
.eligibilityBtn{
背景色：#008e39；
颜色：白色；
边界半径：8px；
文本转换：大写；
字体大小：34px；
字体系列：“开放式Sans”，无衬线；
字号：800；