您好,登錄后才能下訂單哦!
今天在使用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當中的導航條動態添加后渲染失敗的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。