這種問題發生的原因: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
}
}