jQuery's click() inside “for” loop firing once
Question
This is my HTML code:
<!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>
This is the app.js code:
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();
});
}
}
My problem is that when I run this and click the "+" the click() event fires, but after that nothing happens.
Debugging shows that when I call the checkAddToMixClick() function and click the "+" it works again, but stops working after that.
Any solution this?
3 answers
solution1
1 ACCPTED 2016-07-25 17:58:36
Just add checkAddToMixClick(); to your populateInventory() function, and remove checkAddToMixClick() from the top of your code.
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>
solution2
0 2016-07-25 18:00:46
As you can see here you must move your click
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>");
$("#add_to_mix_" + i).click(function(){
inventoryAmounts[i]--;
populateInventory();
});
}
}
solution3
0 2016-07-25 18:34:39
var money = 10; var inventoryNames = ["Carbon", "Hydrogen"]; var inventoryAmounts = [5, 5]; var inventoryLength = 2; updateMoney(); populateInventory(); $(document).on("click", ".clicker", function() { var id = $(this).data('id'); inventoryAmounts[id]--; 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 class='clicker' data-id='" + i + "'>+</td></tr>"); } }
.clicker{}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2 id="money"></h2> <table border="1px" id="inventory_t"></table>
I think the previous answers were great. I Just wanted to provide an alternative as it seems you might want to add the data incrementally.
You can use $.on() in order to hook into any of those td's added to the DOM in the future. This allows you to eliminate the wiring of events to each <td id="add_to_mix"_> . So, if needed, you could simply append to the table instead of recreating it all.
I added a css class in order to make the code simple but you can use any selector you wish. I've also used the data tag in order to avoid parsing the id property.
$(document).on("click", ".clicker", function() {
var id = $(this).data('id');
inventoryAmounts[id]--;
populateInventory();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.