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="width: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>
- 修復后效果
