解决Layui当中的导航条动态添加后渲染失败的问题

今天在使用Layui导航条动态添加的时候，发现动态添加后没有办法再次渲染他的效果，原因未知，但是已经解决了，这里利用的方式是将它渲染出来的span.layui-nav-bar样式利用DOM先删除掉再重新渲染，直接贴图看结果

<ul class="layui-nav" id="nav" layui-filter="test"></ul>

js代码

$(function () {
$.ajax({
url: '/Main/GetType1',
success: 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当中的导航条动态添加后渲染失败的问题就是小编分享给大家的全部内容了，希望能给大家一个参考

您可能感兴趣的文章:

• layui动态渲染生成select的option值方法
• layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
• layui的布局和表格的渲染以及动态生成表格的方法
• 解决使用layui的时候form表单中的select等不能渲染的问题
• 浅谈layui使用模板引擎动态渲染元素要注意的问题
• layui使用表格渲染获取行数据的例子
• layui问题之渲染数据表格时,仅出现10条数据的解决方法
• 解决layui 表单元素radio不显示渲染的问题
• 使用layui 渲染table数据表格的实例代码
• layui框架table 数据表格的方法级渲染详解
• layUI ajax加载html页面后重新渲染的方法