解决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 相关文章推荐
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
详解jquery和vue对比
Apr 16 jQuery
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
如何基于JS截获动态代码
Dec 25 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
论坛头像随机变换代码
2006/10/09 PHP
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python内置函数OCT详解
2016/11/09 Python
python中logging库的使用总结
2017/10/18 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Python hashlib模块加密过程解析
2019/11/05 Python
提升python处理速度原理及方法实例
2019/12/25 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
什么是岗位职责
2013/11/12 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书