jquery - 当我单击按钮时,内容首先出现,然后消失。为什么?我该如何解决?
问题描述
我想要达到的效果是,当我点击添加按钮时,我可以在我的表单中添加一行输入。我写了一个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>
解决方案
问题出在您的按钮<button type="submit" class="btn btn-primary add_ac"> +Add</button>
上。更改type="submit"
为type="button"
将解决问题,否则单击此按钮时将提交表单。
有关按钮类型属性的更多信息,请参阅此文档。
推荐阅读
- html - 引导导航栏搜索按钮不在它应该在的位置
- excel - VBA 过滤在单元格上输入的日期之后的交易日期
- c# - 用 linq 查找和替换列表的结果
- vector - 使用 html2canvas 获取谷歌地图矢量截图
- javascript - 有人可以向我解释有什么问题吗?- 按高度排序
- android - Android webview没有在按钮点击时生成pdf报告
- iframe - 多个 iFrame 结束侦听器事件仅适用于 Embedded Vimeo Link 上的第一个视频
- ruby-on-rails - Raect js:尽管在控制台中有错误的凭据和未经授权的状态,但仍然登录
- javascript - 在 AM Charts JS 中获取给定 X 值的 Y 值
- c++ - 由于链接错误,无法使用 Pistache.io 构建 C++ 程序