解决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动态添加或修改表单元素导致“没效果”的解决方案,希望能为读者提供有价值的参考。

作者最新文章