坑（八）—— LayUI框架中append新的元素的问题

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">&#xe654;</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>

修复后效果

posted on 2020-08-31 17:28 凉城旧巷阅读(2014) 评论(0) 编辑收藏举报