form中动态添加dom元素
2021-02-08 本文已影响0人
夜色001
想实现一个效果，点击添加按钮，动态新增dom元素。准备使用jquery的append方法，但发现总是闪一下又回到原来的效果了。尝试了将近3个小时，第二天早上把新增的元素放到form外，居然好了。
image.png
上网又搜索了一下，原来
button在xhtml申明或者w3c浏览器下等价于type='submit'，所以提交了表单
故只需要将按钮的type改为button即可
<button type="button" class="layui-btn layui-btn-normal btn-add">添加</button>
完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../src/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
.site-demo-button {
padding: 20px
}
.layui-form-item .layui-input-inline {
width: 400px;
}
</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>恭喜你：又学到一首新诗了！</legend>
</fieldset>
<br>
<br>
<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">诗歌名称</label>
<div class="layui-inline" style="width: 400px">
<input type="text" class="layui-input" name="name">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">朝代</label>
<div class="layui-inline">
<input type="text" class="layui-input" name="dynasty">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">作者</label>
<div class="layui-inline">
<input type="text" class="layui-input" name="author">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">正文</label>
<div class="layui-inline" id="content">
<div class="layui-inline">
<input type="text" class="layui-input layui-input-inline" name="content[0]">
<button type="button" class="layui-btn layui-btn-normal btn-add">添加</button>
</div>
<br>
<div class="layui-inline">
<input type="text" class="layui-input layui-input-inline" name="content[1]">
<button type="button" class="layui-btn layui-btn-normal btn-add">添加</button>
<button type="button" class="layui-btn layui-btn-danger btn-delete">删除</button>
</div>
<br>
<div class="layui-inline">
<input type="text" class="layui-input layui-input-inline" name="content[2]">
<button type="button" class="layui-btn layui-btn-normal btn-add">添加</button>
<button type="button" class="layui-btn layui-btn-danger btn-delete">删除</button>
</div>
<br>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="save">保存</button>
</div>
</div>
</form>
<script src="../src/layui.js" charset="utf-8"></script>
<script src="../template/js/jquery.3.2.1.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['form', 'layedit', 'laydate'], function () {
var form = layui.form
, layer = layui.layer;
//监听提交
form.on('submit(demo1)', function (data) {
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
});
$(function () {
let btnAdd = $('#content .btn-add');
btnAdd[0].addEventListener('click',function (e) {
console.log($(this).parent().children(':first').val())
$('#content').append("<div class=\"layui-inline\">\n" +
" <input type=\"text\" class=\"layui-input layui-input-inline\" name=\"content[3]\">\n" +
" <button type=\"button\" class=\"layui-btn layui-btn-normal btn-add\">添加</button>\n" +
" <button type=\"button\" class=\"layui-btn layui-btn-danger btn-delete\">删除</button>\n" +
" </div><br>")
})
});
</script>
</body>
</html>
