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


Posted in Javascript onFebruary 27, 2017

在使用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后弹不出(失效)

点击时效果图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
vue-cli 关闭热更新操作
Sep 18 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 #Javascript
js 调用百度分享功能
Feb 27 #Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 #Javascript
jQuery实现元素的插入
Feb 27 #Javascript
jQuery实现导航回弹效果
Feb 27 #Javascript
使用jQuery操作DOM的方法小结
Feb 27 #Javascript
jQuery模拟淘宝购物车功能
Feb 27 #Javascript
You might like
PHP4和PHP5共存于一系统
2006/11/17 PHP
用来给图片加水印的PHP类
2008/04/09 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
js给selected添加options的方法
2015/05/06 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python算术运算符实例详解
2017/05/31 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Django REST framework 分页的实现代码
2019/06/19 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
岗位职责范本
2013/11/23 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python