所以我有一些代码，我希望每次单击table row时代码都会添加table cell和button个row。当我第一次点击它时，它会添加一个row就像它应该的那样。但是，当我再次点击它时，它会添加两个row个，然后是三个row s，然后是四个var webnetPriceChange;
var cloneCorpPriceChange;
var cityBankPriceChange;
var herbmartPriceChange;
var digitalSystemsPriceChange;
var nationalAirlinesPriceChange;
var statePowerPriceChange;
var parklandPriceChange;
var priceSet;
var stocks = -1;
$(function() {
// update color of totalMoney
setInterval(function() {
var totalMoney = parseInt($("#purchaseStockMoneyAfterPrice").text());
if (totalMoney > 0) {
$("#purchaseStockMoneyAfterPrice").css("color", "green");
}
else {
$("#purchaseStockMoneyAfterPrice").css("color", "darkRed");
}
}, 1);
$("#purchaseStockButton").click(function() {
stocks++;
$("#purchaseStockSelect").val("Webnet");
var webnetActivated = true;
var cloneCorpActivated = false;
var flipPurchaseStockAnimation = $("#purchaseStockBox");
var entireTable = $("#entireTable");
var webnetPrice = parseInt($("#webnetPrice").text());
var cloneCorpPrice = parseInt($("#cloneCorpPrice").text());
var money = parseInt($("#money").text());
$("#purchaseStockMoneyAfterPrice").text(money);
var totalMoney = parseInt($("#purchaseStockMoneyAfterPrice").text());
$("#numberPurchaseStock").val("100");
var numberPurchaseStock = $("#numberPurchaseStock").val();
var cost;
var moneyLeft;
$("#flipBlueCardBox").hide();
entireTable.animate({
opacity: 0,
}, 1000);
flipPurchaseStockAnimation.animate({
top: "+=200px"
}, 0);
flipPurchaseStockAnimation.animate({
opacity: 1
}, 1000);
// change price upon changing stock
$("#purchaseStockSelect").change(function() {
var purchaseStockSelected = $("#purchaseStockSelect").val();
if (purchaseStockSelected == "Webnet") {
webnetActivated = true;
cloneCorpActivated = false;
}
else if (purchaseStockSelected === "Clone Corp") {
cloneCorpActivated = true;
webnetActivated = false;
}
});
setInterval(function() {
var numberPurchaseStock = $("#numberPurchaseStock").val();
if (webnetActivated === true) {
cost = webnetPrice * numberPurchaseStock;
}
else if (cloneCorpActivated === true) {
cost = cloneCorpPrice * numberPurchaseStock;
}
moneyLeft = totalMoney - cost;
$("#purchaseStockPrice").text(cost);
$("#purchaseStockMoneyAfterPrice").text(moneyLeft);
}, 1);
// update stocks table
$("#numberPurchaseStockButton").click(function() {
var totalMoney = parseInt($("#purchaseStockMoneyAfterPrice").text());
if (totalMoney >= 0) {
var flipPurchaseStockAnimation = $("#purchaseStockBox");
var entireTable = $("#entireTable");
var numberPurchaseStock = $("#numberPurchaseStock").val()
var purchaseStockSelected = $("#purchaseStockSelect").val();
if (purchaseStockSelected == "Webnet") {
priceSet = webnetPrice;
}
else if (purchaseStockSelected == "Clone Corp") {
priceSet = cloneCorpPrice;
}
$("#yourStockTableHeader").after('<tr><td id = "stockAmount' + stocks + '">' + numberPurchaseStock + '</td><td id = "stockType' + stocks + '">' + purchaseStockSelected + '</td><td id = "stockPurchaseCost' + stocks + '">' + cost + '</td><td id = "stockSellPrice' + stocks + '">' + priceSet + '</td></tr>');
cost = 0;
entireTable.animate({
opacity: 1
}, 1000);
flipPurchaseStockAnimation.animate({
opacity: 0
}, 1000);
$("#flipBlueCardBox").show();
var webnetActivated = false;
var cloneCorpActivated = false;
}
else {
alert("You do not have enough money!");
}
});
});
// Creates animation after button click
$("#flipABlueCard").click(function() {
var flipABlueCardAnimation = $("#flipBlueCardBox");
var entireTable = $("#entireTable");
entireTable.animate({
opacity: 0
}, 1000);
$("#purchaseStockBox").hide();
flipABlueCardAnimation.animate({
opacity: 1
}, 1000);
});
// Sets the values after having clicked the button
$("#numberBlueCardButton").click(function() {
var numberBlueCardValue = $("#numberBlueCard").val();
var entireTable = $("#entireTable");
var flipABlueCardAnimation = $("#flipBlueCardBox");
entireTable.animate({
opacity: 1
}, 1000);
flipABlueCardAnimation.animate({
opacity: 0
}, 1000);
$("#purchaseStockBox").show();
if (numberBlueCardValue == 1) {
webnetPriceChange = 12;
$("#webnetPrice").text(webnetPriceChange);
cityBankPriceChange = 10;
$("#cityBankPrice").text(cityBankPriceChange);
digitalSystemsPriceChange = 17;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
nationalAirlinesPriceChange = 5;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
}
else if (numberBlueCardValue == 2) {
cloneCorpPriceChange = 12;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
digitalSystemsPriceChange = 20;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
statePowerPriceChange = 15;
$("#statePowerPrice").text(statePowerPriceChange);
parklandPriceChange = 10;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 3) {
webnetPriceChange = 15;
$("#webnetPrice").text(webnetPriceChange);
digitalSystemsPriceChange = 18;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
nationalAirlinesPriceChange = 8;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
statePowerPriceChange = 20;
$("#statePowerPrice").text(statePowerPriceChange);
}
else if (numberBlueCardValue == 4) {
webnetPriceChange = 9;
$("#webnetPrice").text(webnetPriceChange);
cloneCorpPriceChange = 9;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
cityBankPriceChange = 14;
$("#cityBankPrice").text(cityBankPriceChange);
herbmartPriceChange = 19;
$("#herbmartPrice").text(herbmartPriceChange);
}
else if (numberBlueCardValue == 5) {
webnetPriceChange = 6;
$("#webnetPrice").text(webnetPriceChange);
cloneCorpPriceChange = 17;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
nationalAirlinesPriceChange = 9;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
statePowerPriceChange = 14;
$("#statePowerPrice").text(statePowerPriceChange);
}
else if (numberBlueCardValue == 6) {
webnetPriceChange = 16;
$("#webnetPrice").text(webnetPriceChange);
herbmartPriceChange = 12;
$("#herbmartPrice").text(herbmartPriceChange);
digitalSystemsPriceChange = 22;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
statePowerPriceChange = 16;
$("#statePowerPrice").text(statePowerPriceChange);
}
else if (numberBlueCardValue == 7) {
herbmartPriceChange = 10;
$("#herbmartPrice").text(herbmartPriceChange);
digitalSystemsPriceChange = 12;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
statePowerPriceChange = 19;
$("#statePowerPrice").text(statePowerPriceChange);
parklandPriceChange = 16;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 8) {
cloneCorpPriceChange = 15;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
cityBankPriceChange = 17;
$("#cityBankPrice").text(cityBankPriceChange);
herbmartPriceChange = 11;
$("#herbmartPrice").text(herbmartPriceChange);
parklandPriceChange = 15;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 9) {
cloneCorpPriceChange = 14;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
cityBankPriceChange = 11;
$("#cityBankPrice").text(cityBankPriceChange);
herbmartPriceChange = 13;
$("#herbmartPrice").text(herbmartPriceChange);
parklandPriceChange = 17;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 10) {
webnetPriceChange = 13;
$("#webnetPrice").text(webnetPriceChange);
cityBankPriceChange = 16;
$("#cityBankPrice").text(cityBankPriceChange);
herbmartPriceChange = 14;
$("#herbmartPrice").text(herbmartPriceChange);
statePowerPriceChange = 11;
$("#statePowerPrice").text(statePowerPriceChange);
}
else if (numberBlueCardValue == 11) {
cloneCorpPriceChange = 13;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
cityBankPriceChange = 20;
$("#cityBankPrice").text(cityBankPriceChange);
herbmartPriceChange = 18;
$("#herbmartPrice").text(herbmartPriceChange);
nationalAirlinesPriceChange = 15;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
}
else if (numberBlueCardValue == 12) {
webnetPriceChange = 8;
$("#webnetPrice").text(webnetPriceChange);
cloneCorpPriceChange = 11;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
digitalSystemsPriceChange = 19;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
nationalAirlinesPriceChange = 11;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
}
else if (numberBlueCardValue == 13) {
webnetPriceChange = 7;
$("#webnetPrice").text(webnetPriceChange);
digitalSystemsPriceChange = 16;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
statePowerPriceChange = 12;
$("#statePowerPrice").text(statePowerPriceChange);
parklandPriceChange = 12;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 14) {
webnetPriceChange = 11;
$("#webnetPrice").text(webnetPriceChange);
cityBankPriceChange = 13;
$("#cityBankPrice").text(cityBankPriceChange);
herbmartPriceChange = 16;
$("#herbmartPrice").text(herbmartPriceChange);
digitalSystemsPriceChange = 21;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
}
else if (numberBlueCardValue == 15) {
webnetPriceChange = 10;
$("#webnetPrice").text(webnetPriceChange);
cloneCorpPriceChange = 10;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
digitalSystemsPriceChange = 13;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
statePowerPriceChange = 13;
$("#statePowerPrice").text(statePowerPriceChange);
}
else if (numberBlueCardValue == 16) {
herbmartPriceChange = 15;
$("#herbmartPrice").text(herbmartPriceChange);
nationalAirlinesPriceChange = 12;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
statePowerPriceChange = 17;
$("#statePowerPrice").text(statePowerPriceChange);
parklandPriceChange = 11;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 17) {
digitalSystemsPriceChange = 14;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
nationalAirlinesPriceChange = 13;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
statePowerPriceChange = 18;
$("#statePowerPrice").text(statePowerPriceChange);
parklandPriceChange = 14;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 18) {
cloneCorpPriceChange = 16;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
cityBankPriceChange = 12;
$("#cityBankPrice").text(cityBankPriceChange);
herbmartPriceChange = 9;
$("#herbmartPrice").text(herbmartPriceChange);
nationalAirlinesPriceChange = 7;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
}
else if (numberBlueCardValue == 19) {
cloneCorpPriceChange = 8;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
cityBankPriceChange = 19;
$("#cityBankPrice").text(cityBankPriceChange);
nationalAirlinesPriceChange = 10;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
parklandPriceChange = 13;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 19) {
cloneCorpPriceChange = 8;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
cityBankPriceChange = 19;
$("#cityBankPrice").text(cityBankPriceChange);
nationalAirlinesPriceChange = 10;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
parklandPriceChange = 13;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 20) {
cityBankPriceChange = 18;
$("#cityBankPrice").text(cityBankPriceChange);
herbmartPriceChange = 17;
$("#herbmartPrice").text(herbmartPriceChange);
statePowerPriceChange = 21;
$("#statePowerPrice").text(statePowerPriceChange);
parklandPriceChange = 8;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 21) {
webnetPriceChange = 14;
$("#webnetPrice").text(webnetPriceChange);
digitalSystemsPriceChange = 15;
$("#digitalSystemsPrice").text(digitalSystemsPriceChange);
nationalAirlinesPriceChange = 6;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
parklandPriceChange = 9;
$("#parklandPrice").text(parklandPriceChange);
}
else if (numberBlueCardValue == 22) {
cloneCorpPriceChange = 7;
$("#cloneCorpPrice").text(cloneCorpPriceChange);
cityBankPriceChange = 15;
$("#cityBankPrice").text(cityBankPriceChange);
nationalAirlinesPriceChange = 14;
$("#nationalAirlinesPrice").text(nationalAirlinesPriceChange);
parklandPriceChange = 18;
$("#parklandPrice").text(parklandPriceChange);
}
else {
alert("An invalid card number was entered");
}
});
});等。
我想知道为什么会发生这种情况以及如何解决这个问题。代码：
body {
background-color: cornflowerblue;
}
#entireTable {
position: static;
display: table;
}
.title {
display: inline-block;
white-space: pre-wrap;
color: blanchedalmond;
}
table {
border-collapse: collapse;
background-color: white;
display: inline-block;
}
#yourStockTable {
height: 280px;
}
#yourMoneyTable {
height: 280px;
width: 280px;
}
#moneyTab {
white-space: pre-wrap;
}
th, td {
border: 1.5px solid darkgray;
text-align: center;
padding: 6px;
}
#purchaseStockButton, #sellStockButton, #flipABlueCard, #flipANewsCard {
width: 180px;
height: 30px;
border: 1.5px solid darkgray;
}
#purchaseStockButton {
background-color: darkolivegreen;
}
#sellStockButton {
background-color: brown;
}
#flipABlueCard {
background-color: skyblue;
}
#flipANewsCard {
background-color: coral;
}
#purchaseStockButton:hover, #sellStockButton:hover, #flipABlueCard:hover, #flipANewsCard:hover {
cursor: pointer;
}
#flipBlueCardBox, #purchaseStockBox {
opacity: 0;
}
#numberBlueCard {
width: 40px;
}
#numberPurchaseStock {
width: 65px;
}
#upArrowBlueCard:hover, #downArrowBlueCard:hover {
cursor: pointer;
}
#upArrowBlueCard, #downArrowBlueCard {
font-size: 25px;
}
#numberBlueCardButton, #numberPurchaseStockButton {
width: 150px;
height: 30px;
border: 1.5px solid darkgray;
}
#numberBlueCardButton:hover, #numberPurchaseStockButton:hover {
cursor: pointer;
}body {
background-color: cornflowerblue;
}
#entireTable {
position: static;
display: table;
}
.title {
display: inline-block;
white-space: pre-wrap;
color: blanchedalmond;
}
table {
border-collapse: collapse;
background-color: white;
display: inline-block;
}
#yourStockTable {
height: 280px;
}
#yourMoneyTable {
height: 280px;
width: 280px;
}
#moneyTab {
white-space: pre-wrap;
}
th, td {
border: 1.5px solid darkgray;
text-align: center;
padding: 6px;
}
#purchaseStockButton, #sellStockButton, #flipABlueCard, #flipANewsCard {
width: 175px;
height: 30px;
border: 1.5px solid darkgray;
}
#purchaseStockButton {
background-color: darkolivegreen;
}
#sellStockButton {
background-color: brown;
}
#flipABlueCard {
background-color: skyblue;
}
#flipANewsCard {
background-color: coral;
}
#purchaseStockButton:hover, #sellStockButton:hover, #flipABlueCard:hover, #flipANewsCard:hover {
cursor: pointer;
}
#flipBlueCardBox, #purchaseStockBox {
opacity: 0;
}
#numberBlueCard {
width: 40px;
}
#numberPurchaseStock {
width: 65px;
}
#upArrowBlueCard:hover, #downArrowBlueCard:hover {
cursor: pointer;
}
#upArrowBlueCard, #downArrowBlueCard {
font-size: 25px;
}
#numberBlueCardButton, #numberPurchaseStockButton {
width: 150px;
height: 30px;
border: 1.5px solid darkgray;
}
#numberBlueCardButton:hover, #numberPurchaseStockButton:hover {
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="icon.ico">
<title>Stock Market Board</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<center>
<div id = "entireTable">
<table>
<tr>
<th>Stock</th>
<th>Price</th>
</tr>
<tr>
<td>Webnet</td>
<td id = "webnetPrice">11</td>
</tr>
<tr>
<td>Clone Corp</td>
<td id = "cloneCorpPrice">12</td>
</tr>
<tr>
<td>City Bank</td>
<td id = "cityBankPrice">15</td>
</tr>
<tr>
<td>Herbmart</td>
<td id = "herbmartPrice">14</td>
</tr>
<tr>
<td>Digital Systems</td>
<td id = "digitalSystemsPrice">17</td>
</tr>
<tr>
<td>National Airlines</td>
<td id = "nationalAirlinesPrice">10</td>
</tr>
<tr>
<td>State Power</td>
<td id = "statePowerPrice">16</td>
</tr>
<tr>
<td>Parkland</td>
<td id = "parklandPrice">13</td>
</tr>
</table>
<table id = "yourStockTable">
<tr id = "yourStockTableHeader">
<th>Shares</th>
<th>Stock</th>
<th>Cost</th>
<th>Stock Price</th>
</tr>
</table>
<table id = "yourMoneyTable">
<tr>
<th id = "moneyTab"> Money </th>
</tr>
<tr>
<td id = "money">10000</td>
</tr>
</table>
<br>
<button id = "purchaseStockButton">Purchase Stock</button>
<button id = "sellStockButton">Sell Stock</button>
<button id = "flipABlueCard" >Flip A Blue Card</button>
<button id = "flipANewsCard">Flip A News Card</button>
</div>
<div id = "flipBlueCardBox">
<h3 class = "title">Blue Card Number</h3>
<br>
<input id = "numberBlueCard" value = "1" type = "number" min = "1" max = "22"><br><br>
<button id = "numberBlueCardButton">Set</button>
</div>
<div id = "purchaseStockBox">
<h3 class = "title">Purchase Stock</h3><br>
<table>
<tr>
<th>Stock</th>
<th>Amount</th>
<th>Cost</th>
<th>Money After Transaction</th>
</tr>
<tr>
<td>
<select id = "purchaseStockSelect">
<option value = "Webnet">WEB</option>
<option value = "Clone Corp">CC</option>
<option value = "City Bank">CTY</option>
<option value = "Herbmart">H</option>
<option value = "Digital Systems">DS</option>
<option value = "National Airlines">NA</option>
<option value = "State Power">SP</option>
<option value = "Parkland">P</option>
</select>
</td>
<td><input id = "numberPurchaseStock" type = "number" min = "100" value = "100" step = "100"></td>
<td id = "purchaseStockPrice">0</td>
<td id = "purchaseStockMoneyAfterPrice"></td>
</tr>
</table><br>
<button id = "numberPurchaseStockButton">Set</button>
</div>
</center>
</body>
</html>rows
P.S要按原样查看代码，请在整页结果中执行此操作。
P.P.S要运行该程序（使其创建button），请按下“购买股票”＆＃39; library(shinythemes)
library(shiny)
library(plotly)
ui<- fluidPage(theme = shinytheme("spacelab"),
navbarPage(p(strong(code("IOT Analytics"))),
tabPanel("Introduction",tags$br(),
p(strong(code("Brief About the Approach")))
) ,
tabPanel("Data-Glimpse",tags$br(),
p(strong(code("Data Overview"))),
DT::dataTableOutput('Raw_Data')
) ,
tabPanel("Data-Summary",tags$br(),
p(strong(code("Dimension"))),
verbatimTextOutput("dim"),
p(strong(code("Summary"))),
verbatimTextOutput("sum")
),
navbarMenu("Anomaly Detection",
#add conditionalPanel here with respective tabs
conditionalPanel(
'input.navbar == "Visualisation"||input.navbar == "Anomaly-01"||input.navbar == "Error Insight"',
selectInput("variable", "Variable:", c("a","b","c"))
),
tabPanel("Visualisation",
tags$br()
),
tabPanel("Anomaly-01",
tags$br(),
dataTableOutput("temp")
),
tabPanel("Error Insight", tags$br()
)
),
tabPanel("About",tags$br()),
#id for navbarPage
id="navbar" ))
server <- function(input, output){
}
shinyApp(ui, server)
。
答案 0 :(得分：0)
之所以发生这种情况，是因为您nested event，您在event内附加了event，所以每次点击新{{1}将被附加，这会导致对同一event的多个event附件。
尽量避免使用element nested＆amp;提取events，或使用event分离off()，然后使用event附加新on()，如下所示：
$("#numberPurchaseStockButton").off('click').on('click', function() {
而不是：
$("#numberPurchaseStockButton").click(function() {
希望这有帮助。