为什么会同时弹出多个警报？

Question

我正在尝试制作这个甜甜圈唱首歌游戏，它应该类似于曲奇唱首歌。当您 select 从商店购买商品时，应该会弹出一条确认消息以确认您要购买该商品。我在下面的代码中使点击更容易。（你可能想让代码全屏显示）我的问题是，为什么确认弹出窗口连续出现多次？在我的代码中，单击该项目时只有一个确认，所以我真的不知道是什么原因造成的。

$(document).ready(function() {
 tacoClick();
});
function tacoClick() {
 //hide the items
 $(".item").hide();
 
 //defining some store items
  var clickBonus1 = {
  price: 6,
  amount: 25,
 };
 var clickBonus2 = {
  price: 75,
  amount: 10,
 };
 var clickBonus5 = {
  price: 150,
  amount: 5,
 };
 var autoClick = {
  price: 500,
  amount: 1,
 };
 var autoBonus1 = {
  price: 700,
  amount: 10,
 };
 var autoBonus2 = {
  price: 1000,
  amount: 10,
 };
 var autoBonus5 = {
  price: 1200,
  amount: 5,
 };
 var laser = {
  price: 2500,
  amount: 1,
 };
 var battery = {
  price: 1500,
  amount: 666,
 };
 var energyPotion = {
  price: 1500,
  amount: 20,
 };
 var key = {
  price: 500000,
  amount: 1,
 };
 
 //defining the player
 var player = {
  clicks: 0,
  money: 5,
  energy: 100,
  items: ["none"],
  clickAmount: 1,
  energyLost: 0.5,
  waitTime: 600000,
 };

 //clicking! YAY :)
 $("#donut").click(function() {
  //adding num clicks, money, and taking away energy
  player.clicks += player.clickAmount;
  player.energy -= player.energyLost;
  player.money += player.clickAmount / 10;

  //showing player status on the status bar
   document.getElementById("clickNum").innerHTML = player.clicks;
   document.getElementById("playerEnergy").innerHTML = Math.floor(player.energy);
  document.getElementById("money").innerHTML = Math.floor(player.money);
  
  //tired mode
  if(player.energy < 1 && player.energy > -1) {
   alert("You ran out of energy! You'll have to wait ten more minutes until you can play again!");
   $("body").fadeOut();
   window.setTimeout(function revive() {
    $("body").fadeIn();
    player.energy = 100;
   }, player.waitTime);
  }
  
  //the items! now, it gets really tricky...
   if(player.money > 6) {
    $("#clickBonus1").show();
   $("#clickBonus1").click(function() {
    var confirmBuy = confirm("Do you want to buy this item for ?");
    if(confirmBuy) {
     if(player.money > 6) {
      player.clickAmount += 1;
      player.money -=2;
      document.getElementById("money").innerHTML = Math.floor(player.money);
     } else {
      alert("You don't have enough money!");
     }
    }   
   });
   }
 });
}

* {
 font-family: Arial;
 font-weight: bold;
}

#donut {
 height: 500px;
 width: 500px;
 /*background-color: grey;*/
 border-radius: 500px;
}

#donut:hover {
 cursor: pointer;
 width: 505px;
 height: 505px;
 transition: ease 0.3s;
}

body {
 /*border: 1px solid black;*/
 width: 960px;
 text-align: center;
 margin-left: 480px;
 margin-top: 200px;
}

.item:hover {
  cursor: pointer;
 background-color: #EAFFEA;
 transition: ease 0.5s;
}

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
 <script>
   
 </script>
 <style>
  
 </style>
</head>
<body>
<div id="statusBarWrapper">
  <div id="clickNumWrapper">Total clicks: <span id="clickNum">0</span></div>
 <div id="devicesWrapper">Items: <span id="devices">none</span></div>
 <div id="energyWrapper">Energy: <span id="playerEnergy">100</span></div>
 <div id="moneyWrapper">Money: $<span id="money">5</span></div>
</div>
<div id="tacoWrapper">
 <img id="donut" src="http://cliparts.co/cliparts/LTd/jRj/LTdjRjKpc.png"/>
</div>
<div id="shopWrapper">
  <ul id="shop">
  <div class="item" id="clickBonus1">Click bonus (+1 donut / click) <br/> Price: </div>
  <div class="item" id="clickBonus2">Click bonus (+2 donut / click) <br/> Price: </div>
  <div class="item" id="clickBonus5">Click bonus (+5 donut / click) <br/> Price: 0</div>
  <div class="item" id="autoClick">Auto Click (automatically +1 / second) <br/>  Price: 500</div>
  <div class="item" id="autoBonus1">Auto Click bonus (+1 donut / second) <br/> Price: 0</div>
  <div class="item" id="autoBonus2">Auto Click bonus (+2 donut / second) <br/> Price: 00</div>
  <div class="item" id="autoBonus5">Auto Click bonus (+5 donut / click) <br/> Price: 00</div>
  <div class="item" id="laser">Laser (+50 donut / second) <br/> Price: 00</div>
  <li class="item" id="battery">Battery (powers laser for 2 minutes) <br/> Price: 00</div>
  <div class="item" id="energyPotion">Energy Potion (shortens waiting time by 30 seconds) <br/> Price: 00</div>
  <div class="item" id="key">??????</div>
 </ul>
</div>
</body>
</html>

Answer 1

代码可以使用一些重构，但话虽如此，我想我知道可能会发生什么。您正在将点击处理程序绑定到#donut。每次单击#donut 时，都会调用处理程序。处理程序每次调用时都会将点击处理程序绑定到#clickBonus1。因此，如果多次调用#donut click 处理程序，则会将多个处理程序应用于#clickBonus1，这些处理程序将在单击#clickBonus1 时全部调用，从而导致多次警报。

为什么会同时弹出多个警报？

Why are there several alerts popping up at the same time?

html

javascript

jquery

confirm