您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關Bootstrap中popover彈出框在append后失效怎么辦,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
在使用popover(彈出框)時,發現跟其他組件使用方式有些區別,需要手動初始化才能彈出來,如下:
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 頂部 </button> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script>
但如果popover(彈出框)DOM是后來創建的,比如append后,最開始手動初始化了也沒用,經過幾次測試后,發現需要再剛創建popover的DOM后,再一次初始化才生效,如下:
var testHtml = "<button type='button' class='btn btn-default' data-container='body' data-toggle='popover' data-placement='top' data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'>"+ "Popover on 頂部"+ "</button>" $("body").append(testHtml); $('[data-toggle="popover"]').popover(); //創建popover(彈出框)DOM后立即初始化
剛創建時效果圖:
點擊時效果圖:
關于“Bootstrap中popover彈出框在append后失效怎么辦”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。