解决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实现的经典文件树菜单效果,通过JavaScript结合json数组实现文件树菜单的效果,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要为大家详细介绍了微信小程序实现简单的吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
告诉你一个排序算法，也许是最重要的是他们知道 - 快速排序，无论是在PHP和JavaScript实现的。虽然这两种语言之间的代码看起来相似，也有一些差异，这表明了语法知识的重要性！2011-02-02
这篇文章主要介绍了微信小程序3种位置API的使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
也许你有一个很酷的主页，很希望与人分享。同时，你希望访问你主页的人能对你的主页提供一些意见和建议，或者你对某个主题感兴趣，而希望客人也许能给你一帮助，这就要用到留言簿。留言簿使得你能与每一个访问你主页的人交换信息。2008-09-09
本篇文章主要介绍了微信小程序-提示框，现在分享给大家，也给大家做个参考。感兴趣的小伙伴们可以参考一下。2016-11-11
在DOM里面操作textarea里面的字符，是比较麻烦的,本文将介绍一种比较简单的方法，需要的朋友可以参考下2012-12-12
这篇文章主要介绍了Javascript中获取对象的原型对象的方法小结,需要的朋友可以参考下2015-02-02
如果对javascript了解不是特别深入的话,很容易就会写出不兼容的代码(就像我),这时候就得判断浏览器了。比如事件侦听、一些鼠标和键盘事件、Range等,一些都会不一样.下面列出几种常用的检测浏览器方法，以飨观众!2009-09-09
JavaScript鼠标拖动事件监听使用方法以及实例效果演示
最近工作中遇到了鼠标拖动事件监听的相关需求,所以下面这篇文章主要给大家介绍了关于JavaScript鼠标拖动事件监听使用方法以及实例效果演示的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
最新评论