1. 程式人生 > >Layui當中的導航條動態新增後渲染失敗的問題

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當中導航動態新增渲染失敗的問題

今天在使用Layui導航條動態新增的時候,發現動態新增後沒有辦法再次渲染他的效果,原因未知,但是已經解決了,這裡利用的方式是將它渲染出來的span.layui-nav-bar樣式利用DOM先刪除掉再重新渲染,直接貼圖看結果 <ul class="layui-nav"

vue中的導航動態新增class(三目運算子)

1.三目運算子,:class=" isActive==‘aaa’ ? ‘isActive’ : ‘’ ",@click=“toggle(‘aaa’)”。判斷isActive是否等於aaa,相等 -> class=“isActive”,不等 -> class=’’,點選的時候帶

IOS OC Navigation 導航動態隱藏

根據公司需要  最近在研究 IOS 開發 。 小菜鳥一個。 不會gif 只能單張圖發 見諒 效果是這樣的  第一個頁面 第二個頁面 第三個頁面 第四個 TableController

Layui給資料表格動態新增一行並跳轉到新增行所在頁

Layui資料表格動態新增一行問題 Layui是一個前端 UI 框架,該框架風格優雅,但由於釋出時間較短,很多功能並沒有提供實現。 筆者在使用Layui的資料表格的時候,需求是這樣的:當點選新增按鈕

layui進行分頁處理,端返回資料沒有count欄位,需要單獨獲取再新增到資料中,再進行項渲染,另有layui表格資料增刪改查前後端互動

整體效果圖如下: (1)分頁前端介面處理 (2)分頁後端的資料處理 具體程式碼如下: 前端介面程式碼:包括分頁,增刪改查,重新整理(搜尋功能還沒做,後端是java程式碼) <!DOCTYPE html> <html> <hea

jQuery EasyUI動態新增控制元件或者ajax載入頁面不能自動渲染問題的解決方法

現象:        AJAX返回的html無法做到自動渲染為EasyUI的樣式.比如:class="easyui-layout" 等 處理方法:       在html片段載入完畢後使用 Js程式碼   $.parser.parse(context)        即可重新渲染。 實現

滾動頁面一定距離固定導航

函數 chm 固定 spa container off logs cti 文檔流 需求:滾動頁面到一定距離後,頁面中間的導航條固定到頁面的某個位置不動,滾回去時會復原。 document.addEventListener(‘scroll‘, function (event

vue.set動態新增對象屬性,觸發dom渲染

bject tro 數據 his col def style this lec 當我們給一個props或者data中被觀測的對象添加一個新的屬性的時候,不能直接添加,必須使用Vue.set方法 /** * ==== 選擇產品 ==== * 因為vue實

layui動態新增的資料事件失效問題----解決辦法

關於該問題的layui官方文件地址:http://www.layui.com/doc/modules/form.html <div class="layui-form-item"> <label class="layui-form-label">類別</labe

layui動態新增下拉選單

轉:https://blog.csdn.net/Code_shadow/article/details/80431937 (不顯示一定要先把select標籤寫上,不能標籤也動態生成,那樣會不顯示 ) //html <select id="selectID"></sel

vue 解決addRoutes動態新增路由重新整理失效問題(跳轉“404”頁面)

這篇文章主要介紹了vue 解決addRoutes動態新增路由後重新整理失效問題,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧 前言 某些場景下我們需要利用addRoutes動態新增路由,但是重新整理後就會失效,前段時間專案裡剛好遇到了這個應用場景,所以就花時間研究了一下,做下

bootstrap 動態新增modal,隱藏背景仍然殘留的問題 bootstrap-modal-backdrop-remaining

bootstrap-modal-backdrop-remaining 參考連結 https://stackoverflow.com/questions/22056147/bootstrap-modal-backdrop-remaining 解決辦法:js刪除殘留層

jquery動態新增列表樣式失效解決方式

最近在做一個通訊錄,使用jquery mobile方式來做,在動態新增列表後,listview原有的樣式失效,折騰一會,找出解決辦法。程式碼如下。 <%@ page language="ja

動態新增控制元件並顯示滾動

        今天做一個功能,一個LinkLabel上顯示資訊為“ 附件('附件個數')”,並在滑鼠指標移動到此LinkLabel上的時候彈出一個框依序顯示相應數量的LinkLabel,把對應附件名稱繫結到LinkLabel上,點選LinkLabel開啟對應附件。本來之前

layui laydate 渲染失效問題,lay-key導致動態生成程式碼二次渲染失敗

在開發中因為需要動態生成時間選擇框,所以選擇了layui的 laydate控制元件,但是遇到了生成的時間選擇框點選無效的問題,然後再次render 時間選擇器一閃就消失了,查了多方資料,找到了如下的解決方法 首先來看下寫的demo程式碼 首先是 html程式

JQuery新增底部固定導航

最近專案需要在系統頁面底部新增一個導航條,效果類似facebook。專案組成員上網查了一些辦法,也下載了一些JQuery外掛使用,但在IE6,IE7下面視窗縱向滾動會閃爍,而jquery.floatdiv有奇怪的執行錯誤。最後自己整理了一個簡單的解決辦法,在firefox3.

jquery mobile動態新增元素之後不能正確渲染解決方法說明

jquerymobile動態新增元素之後有些不能被正確渲染的解決方法:listview: 新增 jq(".detail").listview("refresh"); div或其他:新增.trigger( "create" ); =======================

easyui 動態新增空間無法渲染 $.parser.parse()無效

    動態新增easyui控制元件<input class="easyui-combobox" > 這樣是無效的,因為easyui沒有實時監控,所以必須動態渲染$.parser.pars

微信小程式中的動態設定導航

微信小程式中動態設定導航條 我們知道微信小程式中設定導航條可以直接在json檔案中設定  "navigationBarTitleText"  = "String"  就可以了 但是我們有時可能需要根據不同的情況動態設定導航條。 微信小程式給我們提供了一個方法  setNa

vue v-html動態新增 html 內容渲染,事件失效(無法從新渲染

內容繫結事件(在新增v-html後面新增程式碼) nextTick 就是節點DOM更新完成後呼叫 ,假如 v-html裡面有一個class=”a”的節點,要在這個DOM上繫結事件,那麼 this