解決Layui當中的導(dǎo)航條動態(tài)添加后渲染失敗的問題
今天在使用Layui導(dǎo)航條動態(tài)添加的時候,發(fā)現(xiàn)動態(tài)添加后沒有辦法再次渲染他的效果,原因未知,但是已經(jīng)解決了,這里利用的方式是將它渲染出來的span.layui-nav-bar樣式利用DOM先刪除掉再重新渲染,直接貼圖看結(jié)果
<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當中的導(dǎo)航條動態(tài)添加后渲染失敗的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript出現(xiàn)setTimeout倒計時誤差的原因分析
setTimeout?倒計時誤差的出現(xiàn)主要與?JavaScript?的事件循環(huán)機制和計時器的執(zhí)行方式有關(guān),本文就來和大家講講具體出現(xiàn)的原因以及解決方法,需要的可以參考一下2023-06-06
使用JavaScript實現(xiàn)alert的實例代碼
本文通過實例代碼給大家介紹了js實現(xiàn)alert的方法,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-07-07
給應(yīng)用部分的js代碼設(shè)定一個統(tǒng)一的入口
javascript是種腳本語言,瀏覽器下載到哪兒就會執(zhí)行到哪兒,下面為大家介紹下,如何給應(yīng)用部分的js代碼一個統(tǒng)一的入口2014-06-06
基于JavaScript實現(xiàn)熔巖燈效果導(dǎo)航菜單
這篇文章主要介紹了基于JavaScript實現(xiàn)熔巖燈效果導(dǎo)航菜單,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01

