LayUI框架中append新的元素的问题
复现
-
第二个下拉框是由第一个点击
+生成实现上述效果js代码如下：
<body> <style> .item{ position:absolute; right:-50px; top:0px; } </style> <form class="layui-form" method='post' action="" enctype="multipart/form-data" id="form"> <div class="layui-form-item"> {% csrf_token %} <label>探测协议与端口:</label> <div id="outer"> <div class="layui-form-item" style="90%;position:relative"> <div class="layui-form-item item"> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="add(this)"> <i class="layui-icon"></i> </button> </div> <div class="layui-form-item"> <select name="protocol"> <option value="0">全部</option> <option value="1">111</option> <option value="2">222</option> </select> </div> <div class="layui-form-item"> <input type="text" name="port" class="form-control" placeholder="探测目标的端口为非默认端口，可选填该项"/> </div> </div> </div> </div> <div class="layui-row"> <div class="layui-col-xs6 layui-col-xs-offset5"> <button id="submit" type="button" class="layui-btn layui-btn-radius" lay-submit lay-filter="form_post">立即提交</button> </div> </div> </form> </body> <script> function add(ev) { var copyer=$(ev).parent().parent().clone(); copyer.find(":text").val(""); $("#outer").append(copyer); </script>
原因
Layui会对select、checkbox、radio等原始元素隐藏，从而进行美化修饰处理。但这需要依赖于form组件，所以必须加载 form，并且执行一个实例。导航的Hover效果、Tab选项卡等同理（它们需依赖 element 模块）
- 所以当新添加这些元素时需要对页面表单元素重新渲染一下
解决方案
在add函数中添加以下代码
layui.use('form', function(){
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
//……
//但是，如果你的HTML是动态生成的，自动渲染就会失效
//因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
form.render();
});
完整code
<script>
function add(ev) {
var copyer=$(ev).parent().parent().clone();
copyer.find(":text").val("");
$("#outer").append(copyer);
layui.use('form', function(){
// 重新渲染form
var form = layui.form;
form.render();
});
</script>
- 修复后效果
