快捷導(dǎo)航

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

更新時(shí)間：2017年02月27日 15:42:16 作者：向著陽(yáng)光微笑

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

在使用popover(彈出框)時(shí)，發(fā)現(xiàn)跟其他組件使用方式有些區(qū)別，需要手動(dòng)初始化才能彈出來(lái)，如下：

<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是后來(lái)創(chuàng)建的，比如append后，最開(kāi)始手動(dòng)初始化了也沒(méi)用，經(jīng)過(guò)幾次測(cè)試后，發(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)建時(shí)效果圖：

點(diǎn)擊時(shí)效果圖：

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