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

Question

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

上面是一个代码链接，便于查看。

我增加了两个按钮，一个在表格里，一个在外面。两个按钮共享相同的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

看看下面的代码。在这里，我使用名为“newValue”的类初始化单击事件，因为Id应该是唯一的。然后我把按钮类型改为按钮。这样表单就不会触发submit事件，表单也不会重新加载。

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

​