Bootstrap中popover彈出框在append后失效怎么辦

這篇文章將為大家詳細講解有關Bootstrap中popover彈出框在append后失效怎么辦，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司長期為超過千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為楚雄州企業(yè)提供專業(yè)的網(wǎng)站設計制作、成都網(wǎng)站制作，楚雄州網(wǎng)站改版等技術服務。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

在使用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)建時效果圖：

點擊時效果圖：

關于“Bootstrap中popover彈出框在append后失效怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文名稱：Bootstrap中popover彈出框在append后失效怎么辦
網(wǎng)站URL：http://bm7419.com/article18/pcigdp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、全網(wǎng)營銷推廣、網(wǎng)站營銷、、網(wǎng)站建設、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)