送信ボタンがここで動作しないのはなぜですか？

Question

https://codepen.io/475513a/pen/bobWbw

上記のコードは簡単に閲覧できるようにするためのリンクです。

フォームの内側に1つ、外側に1つのボタンが2つ追加されています。どちらのボタンも同じjQueryイベントを共有していますが、フォーム内のボタンは何もせず、ページをリフレッシュします。私にe.preventDefaultを伝えているにもかかわらずです。

私は間違っていますか？フォーム内のボタンを外側のものと同じようにするにはどうしたらいいですか？

HTML

<button type="submit" class="btn btn-default" id="newValue">Add</button> 
<div class="container"> 
    <div class="row"> 
    <form> 
     <div class="form-inline"> 
     <div class="form-group"> 
      <label for="foodName">Food</label> 
      <input type="text" class="form-control" id="foodName" placeholder="Strawberries"> 
     </div> 
     <div class="form-group"> 
      <label for="proteinValue">Protein</label> 
      <input type="number" class="dgt form-control " id="proteinValue" placeholder="26"> 
     </div> 
     <div class="form-group"> 
      <label for="fatValue">Fat</label> 
      <input type="number" class="dgt form-control " id="fatValue" placeholder="26"> 
     </div> 
     <div class="form-group"> 
      <label for="carbValue">Carbs</label> 
      <input type="number" class="dgt form-control " id="carbValue" placeholder="26"> 
     </div> 
     <button type="submit" class="btn btn-default" id="newValue">Add</button> 
     </div> 
    </form> 
    </div> 
    <div class="row"> 
    <table class="table table-bordered"> 
     <thead> 
     <tr> 
      <th>Name</th> 
      <th>Units</th> 
      <th>Protein</th> 
      <th>Fat</th> 
      <th>Carbs</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <th scope="row">Food A</th> 
      <td>100 grams</td> 
      <td>20</td> 
      <td>30</td> 
      <td>50</td> 
     </tr> 
     <tr> 
      <th scope="row">Food B</th> 
      <td>100 grams</td> 
      <td>12</td> 
      <td>54</td> 
      <td>78</td> 
     </tr> 
     <tr> 
      <th scope="row">Food C</th> 
      <td>100 grams</td> 
      <td>123</td> 
      <td>54</td> 
      <td>34</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

JS

$(function(){ 
    $("#newValue").on("click", function(e){ 
    var newFoodName = $("#foodName").val(); 
    var newProteinValue = $("#proteinValue").val(); 
    var newFatValue = $("#fatValue").val(); 
    var newCarbValue = $("#carbValue").val(); 

    var $newThFoodName = $("<th>", { 
     text: newFoodName 
    }); 
    var $newThUnits = $("<th>", { 
     text: "100g" 
    }); 
    var $newTrProteinValue = $("<td>", { 
     text: newProteinValue 
    }); 
    var $newTrFatValue = $("<td>", { 
     text: newFatValue 
    }); 
    var $newTrCarbValue = $("<td>", { 
     text: newCarbValue 
    }); 
    var $newTr = $("<tr>"); 

    $newTr.append($newThFoodName).append($newThUnits).append($newTrProteinValue).append($newTrFatValue).append($newTrCarbValue); 

    $("tbody").append($newTr); 
    e.preventDefault; 

    }); 

}); 

CSS

@import "lesshat"; 

.form-inline .form-control { 
    margin: 0rem 1rem; 
} 

#proteinValue, #fatValue, #carbValue { 
    width: 5rem; 
} 

Answer 1

2つの問題。最初に、両方のボタンに同じidを与えたので、後者はJSで無視されます。

第2に、ボタンのclickイベントを防止しました。フォーム提出からのリクエストを停止するには、代わりにフォームのsubmitイベントにフックしてください。

最後に、DOM操作は非常に遅く（相対的に言えば）、HTMLを1つの文字列として構築し、append()を1回呼び出すほうがずっと良いことに注意してください。ただ、以下のコードを通過

$("form").on("submit", function(e) { 
 
    e.preventDefault(); 
 
    addRow(); 
 
}); 
 

 
$("#newValue").on("click", function(e) { 
 
    e.preventDefault(); 
 
    addRow(); 
 
}); 
 

 
function addRow() { 
 
    var newFoodName = $("#foodName").val(); 
 
    var newProteinValue = $("#proteinValue").val(); 
 
    var newFatValue = $("#fatValue").val(); 
 
    var newCarbValue = $("#carbValue").val(); 
 
    
 
    $("tbody").append('<tr><th>' + newFoodName + '</th><th>100g</th><th>' + newProteinValue + '</th><th>' + newFatValue + '</th><th>' + newCarbValue + '</th></tr>'); 
 
}

.form-inline .form-control { 
 
    margin: 0rem 1rem; 
 
} 
 

 
#proteinValue, 
 
#fatValue, 
 
#carbValue { 
 
    width: 5rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="submit" class="btn btn-default" id="newValue">Add</button> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <form> 
 
     <div class="form-inline"> 
 
     <div class="form-group"> 
 
      <label for="foodName">Food</label> 
 
      <input type="text" class="form-control" id="foodName" placeholder="Strawberries"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="proteinValue">Protein</label> 
 
      <input type="number" class="dgt form-control " id="proteinValue" placeholder="26"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="fatValue">Fat</label> 
 
      <input type="number" class="dgt form-control " id="fatValue" placeholder="26"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="carbValue">Carbs</label> 
 
      <input type="number" class="dgt form-control " id="carbValue" placeholder="26"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Add</button> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div class="row"> 
 
    <table class="table table-bordered"> 
 
     <thead> 
 
     <tr> 
 
      <th>Name</th> 
 
      <th>Units</th> 
 
      <th>Protein</th> 
 
      <th>Fat</th> 
 
      <th>Carbs</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <th scope="row">Food A</th> 
 
      <td>100 grams</td> 
 
      <td>20</td> 
 
      <td>30</td> 
 
      <td>50</td> 
 
     </tr> 
 
     <tr> 
 
      <th scope="row">Food B</th> 
 
      <td>100 grams</td> 
 
      <td>12</td> 
 
      <td>54</td> 
 
      <td>78</td> 
 
     </tr> 
 
     <tr> 
 
      <th scope="row">Food C</th> 
 
      <td>100 grams</td> 
 
      <td>123</td> 
 
      <td>54</td> 
 
      <td>34</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div> 
 
<div class="containerz"></div>

Answer 2

：これを試してみてください。ここでは、Idが一意であるため、クリックイベントを初期化するために 'newValue'という名前のクラスを使用します。 ボタンの種類をボタンとして変更しました。フォームが送信イベントを発生させず、フォームがリロードされないようにします。

$(function(){ 
 
    
 

 
    $(".newValue").on("click", function(e){ 
 
    var newFoodName = $("#foodName").val(); 
 
    var newProteinValue = $("#proteinValue").val(); 
 
    var newFatValue = $("#fatValue").val(); 
 
    var newCarbValue = $("#carbValue").val(); 
 
    
 
    var $newThFoodName = $("<th>", { 
 
     text: newFoodName 
 
    }); 
 
    var $newThUnits = $("<th>", { 
 
     text: "100g" 
 
    }); 
 
    var $newTrProteinValue = $("<td>", { 
 
     text: newProteinValue 
 
    }); 
 
    var $newTrFatValue = $("<td>", { 
 
     text: newFatValue 
 
    }); 
 
    var $newTrCarbValue = $("<td>", { 
 
     text: newCarbValue 
 
    }); 
 
    var $newTr = $("<tr>"); 
 
    
 
    $newTr.append($newThFoodName).append($newThUnits).append($newTrProteinValue).append($newTrFatValue).append($newTrCarbValue); 
 
    
 
    $("tbody").append($newTr); 
 
    e.preventDefault; 
 
    
 
    }); 
 
    
 
});

@import "lesshat"; 
 

 
.form-inline .form-control { 
 
    margin: 0rem 1rem; 
 
} 
 

 
#proteinValue, #fatValue, #carbValue { 
 
    width: 5rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="newValue btn btn-default" id="newValue">Add</button> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <form> 
 
     <div class="form-inline"> 
 
     <div class="form-group"> 
 
      <label for="foodName">Food</label> 
 
      <input type="text" class="form-control" id="foodName" placeholder="Strawberries"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="proteinValue">Protein</label> 
 
      <input type="number" class="dgt form-control " id="proteinValue" placeholder="26"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="fatValue">Fat</label> 
 
      <input type="number" class="dgt form-control " id="fatValue" placeholder="26"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="carbValue">Carbs</label> 
 
      <input type="number" class="dgt form-control " id="carbValue" placeholder="26"> 
 
     </div> 
 
     <button type="button" class="newValue btn btn-default" id="newValue">Add</button> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div class="row"> 
 
    <table class="table table-bordered"> 
 
     <thead> 
 
     <tr> 
 
      <th>Name</th> 
 
      <th>Units</th> 
 
      <th>Protein</th> 
 
      <th>Fat</th> 
 
      <th>Carbs</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <th scope="row">Food A</th> 
 
      <td>100 grams</td> 
 
      <td>20</td> 
 
      <td>30</td> 
 
      <td>50</td> 
 
     </tr> 
 
     <tr> 
 
      <th scope="row">Food B</th> 
 
      <td>100 grams</td> 
 
      <td>12</td> 
 
      <td>54</td> 
 
      <td>78</td> 
 
     </tr> 
 
     <tr> 
 
      <th scope="row">Food C</th> 
 
      <td>100 grams</td> 
 
      <td>123</td> 
 
      <td>54</td> 
 
      <td>34</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div> 
 
<div class="containerz"></div>