本文针对Layui动态插入或修改表单元素后样式失效的问题,指出官方文档中form.render(type, filter)方法的作用。通过示例代码展示如何在Ajax请求成功后,使用append追加DOM元素并调用form.render()重新渲染,确保动态生成的Select等控件正常显示。
Layui动态表单渲染问题背景
本文记录基于Layui版本2.2.6的情况,旨在为未来可能遇到相同问题的开发者提供参考。
该问题的官方文档链接为:http://www.layui.com/doc/modules/form.html
官方解决方案:form.render()方法
官方文档说明如下:
当表单元素通过动态方式插入页面时,Form模块的自动化渲染机制无法对其生效。尽管Layui作为经典模块化框架并未采用双向绑定机制,但解决此问题十分简单:只需调用 form.render(type, filter); 方法即可重新渲染表单。
动态添加DOM后的渲染代码示例
具体代码实现示例如下:
$.post('http://4646464645',{adcode:data.value},function(d){
var o= eval('(' +d+')');
var municipalityStr = '';
if (o.status==1) {
for (var i = 0; i < o.districts[0].districts.length; i++) {
municipalityStr +='<option value="'+o.districts[0].districts[i].adcode+'">'+o.districts[0].districts[i].name+'</option>';
}
}
$("#municipality").append(municipalityStr);
form.render();
});
以上分享了Layui动态添加或修改表单元素导致“没效果”的解决方案,希望能为读者提供有价值的参考。