这是我的HTML代码：
<!DOCTYPE html>
<head>
<title>Chemist</title>
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<h2 id="money"></h2>
<table border="1px" id="inventory_t"></table>
<script src="jquery.js"></script>
<script src="app.js"></script>
</body>
</html>
这是app.js代码：
var money = 10;
var inventoryNames = ["Carbon", "Hydrogen"];
var inventoryAmounts = [5, 5];
var inventoryLength = 2;
updateMoney();
populateInventory();
checkAddToMixClick();
function updateMoney(){
$("#money").text(money + "$");
}
function populateInventory(){
$("#inventory_t").empty();
$("#inventory_t").append("<tr><td colspan='3'>Inventory</td></tr>")
for(let i = 0; i < inventoryLength; i++){
$("#inventory_t").append("<tr><td style='text-align:center'>" + inventoryNames[i] + "</td><td style='text-align:center'>" + inventoryAmounts[i] + "</td><td id='add_to_mix_" + i + "'>+</td></tr>")
}
}
function checkAddToMixClick(){
for(let i = 0; i < inventoryLength; i++){
$("#add_to_mix_" + i).click(function(){
inventoryAmounts[i]--;
populateInventory();
});
}
}
我的问题是，当我运行此程序并单击“ +”时，将触发click（）事件，但是此后什么也没有发生。
调试显示，当我调用checkAddToMixClick（）函数并单击“ +”时，它将再次起作用，但此后将停止工作。
有什么解决办法吗？
最佳答案
只需将checkAddToMixClick();添加到您的populateInventory()函数中，然后从代码顶部删除checkAddToMixClick()。
var money = 10;
var inventoryNames = ["Carbon", "Hydrogen"];
var inventoryAmounts = [5, 5];
var inventoryLength = 2;
updateMoney();
populateInventory();
function updateMoney(){
$("#money").text(money + "$");
}
function populateInventory(){
$("#inventory_t").empty();
$("#inventory_t").append("<tr><td colspan='3'>Inventory</td></tr>")
for(let i = 0; i < inventoryLength; i++){
$("#inventory_t").append("<tr><td style='text-align:center'>" + inventoryNames[i] + "</td><td style='text-align:center'>" + inventoryAmounts[i] + "</td><td id='add_to_mix_" + i + "'>+</td></tr>")
}
checkAddToMixClick();
}
function checkAddToMixClick(){
for(let i = 0; i < inventoryLength; i++){
$("#add_to_mix_" + i).click(function(){
inventoryAmounts[i]--;
populateInventory();
});
}
}<!DOCTYPE html>
<head>
<title>Chemist</title>
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<h2 id="money"></h2>
<table border="1px" id="inventory_t"></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</body>
</html>