Question

我想要实现的效果是，当我单击“添加”按钮时，可以在表单中添加一行输入。我写了一个jQuery，但是当我单击时，内容迅速出现并消失了。我该如何解决？

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

Answer 1

问题出在您的按钮<button type="submit" class="btn btn-primary add_ac"> +Add</button>上。将type="submit"更改为type="button"将解决问题，否则当您单击此按钮时将提交表单。

有关按钮类型属性的更多信息，请参见此document。

当我单击按钮时，内容首先出现，然后消失。为什么？我该如何解决？

1 个答案: