javascript - JQuery .append() 内容不会保留在屏幕上

Question

我正在创建一个表单，用户可以在其中添加他们在大学学习的模块。当他们单击该按钮时，它会为另一个模块添加一组新字段。我已向按钮 #add 添加了一个点击监听器，并尝试使用相同的字段附加表单 #input_form:

<form id="input_form">

   <h6>Add modules below...</h6>

   <div class="form-row">

      <div class="col-md-6">
         <input type="text" class="form-control" name="module_name" placeholder="Module Name">
      </div>

      <div class="col-md-6">
          <input type="text" class="form-control" name="module_code" placeholder="Module Code">
      </div>

    </div>

    <div class="form-group col-md-6">
        <label for="credit_entry"># of Credits: </label>
        <input type="number" name="credits" id="credit_entry">
    </div>

    <div class="form-group col-md-6">
        <label for="colour_selector">(Optional) Choose a Colour: </label>
           <select id="colour_selector" name="colour_select">
             <option value="blue">Blue</option> <!-- Default -->
             <option value="red">Red</option>
             <option value="yellow">Yellow</option>
             <option value="pink">Pink</option>
             <option value="black">Black</option>
            </select>
        </div>
     </div>

        <div class="row">
          <button name="add" id="add" class="btn btn-secondary">Add Another</button>
        </div>

 // Add fields dynamically
  $("#add").click(function() {
    $("#input_form").append("<h1>The fields will go here</h1>");
  });

当我单击按钮时，我会看到一瞬间添加的内容(h1)，但随后它就消失了。我不确定为什么附加的 HTML 不会保留在屏幕上。我有这个项目的另一部分，其工作原理类似，并附加到 ul 列表，并且 HTML 可以很好地保留在屏幕上，但由于某种原因，这不会。

我对网页设计和 jQuery 很陌生，如果我缺少一个简单的答案，我很抱歉。

Answer 1

“如果元素有表单所有者，则该元素必须从按钮元素提交表单所有者。” (w3.org)

这意味着，表单内的任何按钮都会在其父表单上执行 submit()。为了防止这种情况，请将按钮类型显式定义为 button:

<button name="add" type="button" id="add" class="btn btn-secondary">Add Another</button>

实际操作中: https://codepen.io/akamichael/pen/NWqgaWz?editors=1010