jQueryはjQueryで作成された編集ボタンを認識しません

Question

jQueryを初めて使用しています：
質問：配置ボタンをクリックした後、テーブルの編集ボタンをクリックします。編集ボタンは編集から保存に切り替えると仮定していますが、私のデバッガによれば、ボタンを認識していません。私は何か提案を感謝します。

https://jsfiddle.net/fh9e868u/6/

HTML：

<!--jQuery CDN --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<form> 
<fieldset> 
<legend>Customer's Information</legend> 
<!--asks for name--> 
<label for="nameInput">Name</label> 
<input type="text" id="nameInput" name="name" placeholder="John Doe" /> 
<br><br> 
Drink Order:  
<!--asks for coffee type--> 
<select name="drinkType" id="drinkType"> 
<option value="#">Select Drink</option> 
<option value="0">Tea $2.25</option> 
<option value="1">Coke $2.50</option> 
<option value="2">Coffee $2.25</option> 
</select> 
<br><br> 
<label for="subtotal">Subtotal :</label> 
<input type="text" id="subtotal" disabled> 
<br> 
<label>&nbsp;</label> 
<input type="button" id="placeOrderBtn" value="Place Order">  
<br><br> 

</fieldset> 
</form> 
<br> 
<h3 class = "hiddenReceipt">Receipt</h3> 
<br>  
<table id = "receiptOrders"> 
<thead> 
<tr> 
<th>Item Number</th> 
<th>Name</th> 
<th>Type of Drink</th> 
<th>Subtotal</th> 
<th>Edit/Save</th> 
<th>Delete</th> 
</tr> 
</thead> 
<tbody></tbody> 
</table> 

JS：

// if errors JavaScript will stop running 
"use strict"; 

// Global Variables 
var amt = 0; 
var temp = $("input[name=temp]:radio") // gets temperature radio button 
var totalDrinkCost = 0; 
var drinkName; // drink names 
var itemNumber; // for receipt purposes 

// arrays 
var drinkCosts = [2.25, 2.50, 2.25]; // costs of each drink type 
var drinkCostsHolder = []; // holds each drin costs 
var namesInputsHolder =[]; // holds each customer's name 
var drinkTypeNamesHolder = []; // holds each drink type 
var subtotalHolder = []; // holds each customer's subtotal 

// ready event: short way 
// long way: $(document).ready(function()){ 
$(function() {  
// change 
$("select").change(processOrder); // select tags 

// calculates total cost 
$("#placeOrderBtn").click(function() { 
if ($("#drinkType").val() == "#") { 
alert ("Please select a drink type"); 
} else { 
var nameInput = $("#nameInput").val(); // gets id: name value from HTML page 
var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page 
var totalList = 0; 
var subtotal = parseFloat($("#subtotal").val()); 
subtotal = subtotal.toFixed(2); // converts to string, 2 numbers after decimal 

// adds new item to the end of the array using push method 
namesInputsHolder.push(nameInput); // adds name 
drinkTypeNamesHolder.push(drinkTypeName(drink)); // adds drink type 

subtotalHolder.push(subtotal); // adds subtotal cost 

// i retrieves each element from the array 
for (var i = 0; i < namesInputsHolder.length; i++) { 
totalList = "<tr><td>" + (i+1) + "</td><td>" + namesInputsHolder[i] + "</td><td>" + drinkTypeNamesHolder[i] + "</td><td>" + subtotalHolder[i] + "</td><td></td><td><input type='button' value='Edit' class='editBtn'><input type='button' value='Save' class='saveBtn'></td><td><input type='checkbox'></td></tr>";  
} 

$("#receiptOrders > tbody").append(totalList); // table: tbody: children 
} 

// edits information 
// edits information 
$(".editBtn").click(function() { 
$(this).hide(); // hides edit button 
$(this).siblings(".saveBtn").show(); // displays save button 
}); // end edit click 

$(".saveBtn").click(function() { 
$(this).hide(); // hides save button 
$(this).siblings(".editBtn").show(); // displays edit button 
}); // end save click 

}); // end places order click 

}); // end of ready event handler 

var processOrder = function() { 
// declaring local variables 
var amt = 0; 
var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page 

// shows output 

//calls the function 
var subtotal = drinkType(drink); 
subtotal = parseFloat(subtotal); 
// val() returns string, need to parse it into number first 
$("#subtotal").val(subtotal.toFixed(2)); 

}; 

// matches each drink type to each price 
// gets amount 
var drinkType = function(inDrink) { 
var amt = 0; 
switch(inDrink) { 
case 0: 
amt = drinkCosts[0]; // Tea 
break; 
case 1: 
amt = drinkCosts[1]; // Coke 
break; 
case 2: 
amt = drinkCosts[2]; // Coffee 
break; 
} 
return amt; 
}; 

// matches each drink type to each price 
// gets name for receipt purposes 
var drinkTypeName = function(inDrink) { 
switch(inDrink) { 
case 0: 
return "Tea"; 
break; 
case 1: 
return "Coke"; 
break; 
case 2: 
return "Coffee"; 
break; 
} 
}; 

Answer 1

私は私が間違って何をしたかを考え出しました。私は自分のアンカーを見つけました：toggle edit buttons with save and cancel buttons

私はコードを編集し、jsFiddleを更新しました。

元々、readyイベントの下に//編集/保存関数を置いていました。 #placeOrderBtn関数にネストされているはずです。

JS：

// edits information 
$(".editBtn").click(function() { 
$(this).hide(); // hides edit button 
$(this).siblings(".saveBtn").show(); // displays save button 
}); // end edit click 

$(".saveBtn").click(function() { 
$(this).hide(); // hides save button 
$(this).siblings(".editBtn").show(); // displays edit button 
}); // end save click