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 相关文章推荐
jquery 锁定弹出层实现代码
Feb 23 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
vue实现表格过滤功能
Sep 27 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
用PHP生成静态HTML速度快类库
2007/03/18 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
eclipse创建python项目步骤详解
2019/05/10 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
经济贸易系毕业生求职信
2014/05/31 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
学校食堂管理制度
2015/08/04 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript