Bootstrap的popover(彈出框)在append后彈不出(失效)
更新時間：2017年02月27日 15:42:16 作者：向著陽光微笑
這篇文章主要介紹了Bootstrap的popover(彈出框)在append后彈不出，失效的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在使用popover(彈出框)時，發(fā)現跟其他組件使用方式有些區(qū)別，需要手動初始化才能彈出來，如下：
<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是后來創(chuàng)建的，比如append后，最開始手動初始化了也沒用，經過幾次測試后，發(fā)現需要再剛創(chuàng)建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(); //創(chuàng)建popover（彈出框）DOM后立即初始化
剛創(chuàng)建時效果圖：
點擊時效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
之前小編和大家分享了SVG中如何配合使用text和tspan來實現換行的功能，所以這篇文章對此功能進行一下封裝，以后就可以直接用了。有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
如果不使用類庫或者沒有自己的類庫，儲備一些常用函數總是有好處的。2009-09-09
input標簽的輸入值通過js進行獲取，部分標簽和類是封裝在框架內的，其效果和html標簽差不多，具體實現如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
下面小編就為大家?guī)硪黄狫avaScript 完成注冊頁面表單校驗的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了JavaScript實現Excel表格效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
今天小編就為大家分享一篇原生js檢測頁面加載完畢的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
this是JavaScript中的關鍵字之一，在編寫程序的時候經常會用到，正確的理解和使用關鍵字this尤為重要。接下來通過本文給大家介紹javascript中的this，需要的朋友參考下吧2016-02-02
這篇文章主要介紹了微信小程序基于數據庫時間實現商品倒計時功能(可重用代碼),代碼很完整，拿來就可以使用，現在我把完整的代碼分享給大家，需要的朋友可以參考下2022-07-07
動態(tài)加載dtree.js樹treeview(示例代碼)
本篇文章主要是對動態(tài)加載dtree.js樹treeview的示例代碼進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了js實現移動端tab切換時下劃線滑動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09