解决Layui当中的导航条动态添加后渲染失败的问题
网络编程 2021-07-04 15:01www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇解决Layui当中的导航条动态添加后渲染失败的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
今天在使用Layui导航条动态添加的时候,发现动态添加后没有办法再次渲染他的效果,原因未知,但是已经解决了,这里利用的方式是将它渲染出来的span.layui-nav-bar样式利用DOM先删除掉再重新渲染,直接贴图看结果
<ul class="layui-nav" id="nav" layui-filter="test"></ul>
js代码
$(function () { $.ajax({ url: '/Main/GetType1', suess: function (da) { //重点地方,将Layui在页面加载时渲染出来的span.layui-nav-bar提前删除掉 $("#nav").find('span.layui-nav-bar').remove(); $.each(da, function (index, value) { var name = da[index]['name']; var id=da[index]['id']; var $li = $("<li class='layui-nav-item' id='t"+id+"'><a href='javascript:;'>" + name + "</a></li>"); $("#nav").append($li); //addul("t" + id, id); }) //列表添加完后再次执行渲染 xuanran(); } }) }) function xuanran() { layui.use('element', function () { var element = layui.element; var layFilter = $("#nav").attr('lay-filter'); element.render('nav', layFilter); }) }
这样就解决了问题!
以上这篇解决Layui当中的导航条动态添加后渲染失败的问题就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程