解决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倒计时误差的原因分析

    JavaScript出现setTimeout倒计时误差的原因分析

    setTimeout 倒计时误差的出现主要与 JavaScript 的事件循环机制和计时器的执行方式有关,本文就来和大家讲讲具体出现的原因以及解决方法,需要的可以参考一下
    2023-06-06
  • JS控制TreeView的结点选择

    JS控制TreeView的结点选择

    这篇文章主要为大家详细介绍了JS控制TreeView的结点选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 使用JavaScript实现alert的实例代码

    使用JavaScript实现alert的实例代码

    本文通过实例代码给大家介绍了js实现alert的方法,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-07-07
  • js同时按下两个方向键

    js同时按下两个方向键

    本文通过实例代码给大家介绍了js同时按下两个方向键的实现方法,感兴趣的朋友跟随脚本之家小编一起看看吧
    2007-12-12
  • JS获取计算机mac地址以及IP的实现方法

    JS获取计算机mac地址以及IP的实现方法

    本篇文章主要是对利用JS获取计算机mac地址以及IP的实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • js中匿名函数的N种写法

    js中匿名函数的N种写法

    在java中有private属性,强大的功能js不能实现就矮人一截,匿名函数,发扬广大
    2010-09-09
  • 微信小程序实现简易的计算器功能

    微信小程序实现简易的计算器功能

    这篇文章主要为大家详细介绍了微信小程序实现简易的计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • JS+DIV实现的卷帘效果示例

    JS+DIV实现的卷帘效果示例

    这篇文章主要介绍了JS+DIV实现的卷帘效果,结合具体实例形式对比分析了javascript响应鼠标事件动态操作页面元素属性实现展开与折叠效果的相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • 给应用部分的js代码设定一个统一的入口

    给应用部分的js代码设定一个统一的入口

    javascript是种脚本语言,浏览器下载到哪儿就会执行到哪儿,下面为大家介绍下,如何给应用部分的js代码一个统一的入口
    2014-06-06
  • 基于JavaScript实现熔岩灯效果导航菜单

    基于JavaScript实现熔岩灯效果导航菜单

    这篇文章主要介绍了基于JavaScript实现熔岩灯效果导航菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论