为什么提交按钮不在这里工作？

Question

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

上面是一个指向codepen的链接，方便查看。

我添加了两个按钮 - 一个在窗体内，另一个在外面。两个按钮共享相同的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

两个问题。首先，你给了两个按钮id，因此后者在JS中被忽略了。

其次，您已阻止按钮的click事件。要停止从表单提交中提出请求，您最好更好地连接到表单的submit事件。

最后，请注意DOM操作非常非常慢（相对而言），因此将HTML构建为单个字符串并且仅调用append()一次更好。试试这个：

$("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

请仔细阅读以下代码。在这里，我使用名为＆＃39; newValue＆＃39;初始化click事件，因为Id应该是唯一的。 然后我将按钮类型更改为按钮。因此表单不会触发提交事件，并且表单不会重新加载。

＆＃13;

＆＃13;

$(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;
    
  });
  
});

＆＃13;

@import "lesshat";

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;