解决Layui动态添加表单元素后渲染失效的问题
作者:阿沐时间:2026-10-23 11:14:36浏览:68
本文针对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动态添加或修改表单元素导致“没效果”的解决方案,希望能为读者提供有价值的参考。
作者最新文章
为什么叫JavaScript:语言命名由来及与Java的历史渊源
2026-11-05 11:37:48
JS获取当前时间年月日时分秒并格式化为YYYY-MM-DD HH:mm:ss
2026-11-04 21:25:21
不同语言间JS与Java/Python加密结果不一致怎么办
2026-11-04 18:27:23
Mock.js 拦截 Axios 和 Fetch 请求的原理与配置方法
2026-11-04 08:13:59
JS怎么获取当前日期并格式化为YYYY-MM-DD
2026-11-03 18:47:03
