解决Layui当中的导航条动态添加后渲染失败的问题
更新时间:2019年09月25日 15:16:35 作者:馒头君一号
今天小编就为大家分享一篇解决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当中的导航条动态添加后渲染失败的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
JavaScript出现setTimeout倒计时误差的原因分析
setTimeout 倒计时误差的出现主要与 JavaScript 的事件循环机制和计时器的执行方式有关,本文就来和大家讲讲具体出现的原因以及解决方法,需要的可以参考一下2023-06-06


最新评论