这种问题发生的原因: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\"></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\"></i><div>"+data[i].tname+"</div></div>";
radioGroup[0].innerHTML += tt
}
}