layui动态添加的表单元素显示异常

最新推荐文章于 2025-03-25 09:30:06 发布

原创最新推荐文章于 2025-03-25 09:30:06 发布

· 938 阅读

0 ·

版权

文章标签：

#layui #radio #jquery动态生成元素

前端专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了在使用layui框架时，动态添加radio元素后出现显示异常的问题及其解决方法。原因是layui会对表单元素进行二次渲染，动态添加的代码未经过再次渲染。解决策略是在动态添加元素后，调用form.render()方法手动触发渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这种问题发生的原因：layui会对表单内的元素进行二次渲染，动态添加的代码没有经过再次渲染，所以显示异常。

官方文档其实也有提及这个问题和解决方法

https://www.layui.com/doc/modules/form.html#render

解决方法：动态添加元素后，使用form.render()手动触发渲染，如下代码所示：

layui.use(['form'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        //监听radio选中事件，与本文无关
        form.on('radio(test)', function (obj) {
            //动态添加元素
            addThing(obj.value)
            //执行渲染
            form.render('radio')
        });
    });

另外附上layui动态添加radio元素的方法：

 function addThing(radioGroup, data) {
        radioGroup[0].innerHTML = ""
        if (data.length == 0) return;

        var tt = "<input type=\"radio\" name=\"thing\" value=\""+data[0].tname+"\" title=\""+data[0].tname+"\" checked=\"\"><div class=\"layui-unselect layui-form-radio layui-form-radioed\"><i class=\"layui-anim layui-icon\">&#xe643</i><div>"+data[0].tname+"</div></div>"
        radioGroup[0].innerHTML += tt
        for (var i = 1; i < data.length; i++) {
            var temp = data[i].tname
            tt = "<input type=\"radio\" name=\"thing\" value=\""+data[i].tname+"\" title=\""+data[i].tname+"\"><div class=\"layui-unselect layui-form-radio\"><i class=\"layui-anim layui-icon\">&#xe63f</i><div>"+data[i].tname+"</div></div>";
            radioGroup[0].innerHTML += tt
        }
    }