解決Layui當中的導航條動態(tài)添加后渲染失敗的問題
更新時間：2019年09月25日 15:16:35 作者：饅頭君一號
今天小編就為大家分享一篇解決Layui當中的導航條動態(tài)添加后渲染失敗的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
今天在使用Layui導航條動態(tài)添加的時候，發(fā)現動態(tài)添加后沒有辦法再次渲染他的效果，原因未知，但是已經解決了，這里利用的方式是將它渲染出來的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);
})
//列表添加完后再次執(zhí)行渲染
xuanran();
}
})
})
function xuanran() {
layui.use('element', function () {
var element = layui.element;
var layFilter = $("#nav").attr('lay-filter');
element.render('nav', layFilter);
})
}
這樣就解決了問題！
以上這篇解決Layui當中的導航條動態(tài)添加后渲染失敗的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
JavaScript出現setTimeout倒計時誤差的原因分析
setTimeout?倒計時誤差的出現主要與?JavaScript?的事件循環(huán)機制和計時器的執(zhí)行方式有關，本文就來和大家講講具體出現的原因以及解決方法，需要的可以參考一下2023-06-06
這篇文章主要為大家詳細介紹了JS控制TreeView的結點選擇,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本文通過實例代碼給大家介紹了js實現alert的方法，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-07-07
本文通過實例代碼給大家介紹了js同時按下兩個方向鍵的實現方法，感興趣的朋友跟隨腳本之家小編一起看看吧2007-12-12
本篇文章主要是對利用JS獲取計算機mac地址以及IP的實現方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
在java中有private屬性，強大的功能js不能實現就矮人一截，匿名函數，發(fā)揚廣大2010-09-09
這篇文章主要為大家詳細介紹了微信小程序實現簡易的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了JS+DIV實現的卷簾效果,結合具體實例形式對比分析了javascript響應鼠標事件動態(tài)操作頁面元素屬性實現展開與折疊效果的相關操作技巧,需要的朋友可以參考下2017-03-03
javascript是種腳本語言，瀏覽器下載到哪兒就會執(zhí)行到哪兒，下面為大家介紹下，如何給應用部分的js代碼一個統(tǒng)一的入口2014-06-06
這篇文章主要介紹了基于JavaScript實現熔巖燈效果導航菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01