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


Posted in Javascript onSeptember 25, 2019

今天在使用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 动态添加表格行
Jun 22 Javascript
js 调整select 位置的函数
Feb 21 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
js中创建对象的几种方式
Feb 05 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 #Javascript
使用localStorage替代cookie做本地存储
Sep 25 #Javascript
JavaScript使用localStorage存储数据
Sep 25 #Javascript
Vue路由守卫之路由独享守卫
Sep 25 #Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 #Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 #Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 #Javascript
You might like
Cakephp 执行主要流程
2010/03/24 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
js类 from qq
2006/11/13 Javascript
Javascript注入技巧
2007/06/22 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
解析vue中的$mount
2017/12/21 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python实现微信机器人的方法
2019/09/06 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
勤俭节约演讲稿
2014/05/08 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
旷工检讨书1000字
2015/01/01 职场文书
风之谷观后感
2015/06/11 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL