当我点击按钮，内容首先出现，然后消失。为什么？我该怎么修好它？[副本]

Question

我想达到的效果是，当我单击Add按钮时，我可以向我的表单添加一行输入。我写了一个jQuery，但当我点击时，内容很快出现又消失。我该怎么修好它？

null

$(document).ready(function() {
  $(".add_ac").click(function() {
    $(".choose_activity").clone().attr({
      class: "form-row"
    }).appendTo($("#activity_list"));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="col activity_input">
  <form>
    <div class="form-group">
      <label for="selectAge">Please Select Your Child Age Group</label>
      <select class="form-control" name="" id="selectAge">
        <option value="">Form 0 todo 4</option>
      </select>
    </div>
    <!-- choose activity and hours -->
    <div id='activity_list'>
      <div class="form-row choose_activity">
        <div class="col-5">
          <select class="form-control">
            <option value="0">Choose Activity</option>
          </select>
        </div>
        <div class="col-5">
          <input type="text" class="form-control" placeholder="How many hour this week?">
        </div>
        <div class="col-2">
          <button type="submit" class="btn btn-primary add_ac"> +Add</button>
        </div>
      </div>
      <br>

    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
  </form>
</div>

null

Answer 1

问题出在按钮+add上。将type=“submit”更改为type=“button”将解决此问题，否则单击此按钮时表单将提交。

有关按钮类型属性的更多信息，请参阅本文档。