Bootstrap的popover(彈出框)在append后彈不出(失效)

更新時間：2017年02月27日 15:42:16 作者：向著陽光微笑

這篇文章主要介紹了Bootstrap的popover(彈出框)在append后彈不出，失效的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在使用popover(彈出框)時，發(fā)現(xiàn)跟其他組件使用方式有些區(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后，最開始手動初始化了也沒用，經(jīng)過幾次測試后，發(fā)現(xiàn)需要再剛創(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)建時效果圖：

點擊時效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

In Javascript Class, how to call the prototype method.(three
In Javascript Class, how to call the prototype method.(three method)...
2007-01-01
webpack-dev-server搭建本地服務(wù)器的實現(xiàn)
當(dāng)我們使用webpack打包時，發(fā)現(xiàn)每次更新了一點代碼，都需要重新打包，我們希望本地能搭建一個服務(wù)器，本文就介紹如何使用webpack-dev-server搭建本地服務(wù)器，感興趣的可以了解一下
2021-07-07
JS實現(xiàn)table表格固定表頭且表頭隨橫向滾動而滾動
這篇文章主要介紹了JS實現(xiàn)table表格固定表頭且表頭可以隨橫向滾動而滾動,需要的朋友可以參考下
2017-10-10
javascript中的閉包概念與用法實踐分析
這篇文章主要介紹了javascript中的閉包概念與用法,結(jié)合具體實例形式分析了javascript閉包的概念、原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
2019-07-07
javascript 操作cookies及正確使用cookies的屬性
在 JS(JavaScript) 操作cookies比較復(fù)雜，在 ASP 里面我們只需要知道 cookie 的名稱、cookie 的值就行了，而 JS 里面，我們面對的是 cookie 的字符串，你自己編寫這個字符串寫入客戶端，然后自己解析這個字符串。
2009-10-10
js字符串操作方法實例分析
這篇文章主要介紹了js字符串操作方法,實例分析了javascript中slice、substr及substring等方法的使用技巧,需要的朋友可以參考下
2015-05-05
js Array操作的最簡短最容易理解方法
這篇文章主要是對js中的Array操作進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
JS字符串按逗號和回車分隔的方法
下面小編就為大家?guī)硪黄狫S字符串按逗號和回車分隔的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
Webpack框架核心概念(知識點整理)
webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)。這篇文章主要介紹了Webpack框架核心概念(知識點整理),需要的朋友可以參考下
2017-12-12
微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能示例【通過openid推送消息給用戶】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能,結(jié)合實例形式分析了微信小程序?qū)崿F(xiàn)通過openid推送消息給用戶相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05