layui动态添加的表单元素显示异常

这种问题发生的原因：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\">&#xe643</i><div>"+data[0].tname+"</div></div>"radioGroup[0].innerHTML += ttfor (var i = 1; i < data.length; i++) {var temp = data[i].tnamett = "<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\">&#xe63f</i><div>"+data[i].tname+"</div></div>";radioGroup[0].innerHTML += tt}}

layui动态添加的表单元素显示异常相关推荐

form表单无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
javascript动态添加form表单元素
2019独角兽企业重金招聘Python工程师标准>>> 2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的情景: 后台要上传游戏截 ...
v-for 循环生成多个表单元素给动态生成的表单元素绑定值并且添加校验规则
需求:点击新增按钮能不断生成下级部门,所以我再data中定义了一个变量空数组 subordinateDepartmentNum:[] 默认值设置为[] 给增加按钮添加点击事件每点击一次按钮 s ...
用jquery动态添加form表单
function _searchCook() {var cook_name = $(":input[name='cookedFood.name']", "#search_ ...
vue动态生成表单元素基础篇
这里讲解一个vue生成表单的简单实例: (图一) (图二) (图三) 如上图所示: 图一: 空的输入框的情况图二: 点击 "+" 添加生成表单的情况图三: 表单中可以输入值,并 ...
layui追加或动态修改表单元素不生效
转自:https://blog.csdn.net/qq_29712303/article/details/80030757 在layui的post中请求后台,获取数据,数据获取后修改html页面中内容 ...
vue动态生成表单元素
前几天接了一个需求,需要动态生成一个表单数据,然后提交,提交完数据后.通过编辑按钮进入时,需要进行数据回填. 一.页面展示: I. 没生成表单前的状态 Vue-UEedit UEedit II. 单机 ...
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...
html元素全屏右键显示覆盖,HTML表单元素覆盖样式元素问题及其补救之道
HTML表单元素覆盖样式元素问题及其补救之道更新时间:2006年07月27日 00:00:00 作者: 在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子 ...

layui动态添加的表单元素显示异常

layui动态添加的表单元素显示异常相关推荐

最新文章

热门文章