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 相关文章推荐
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
require.js的用法详解
Oct 20 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
mui back 返回刷新页面的实例
Dec 06 Javascript
react 创建单例组件的方法
Apr 26 Javascript
vue中的inject学习教程
Apr 24 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
煤矿班组长竞聘书
2014/03/31 职场文书
爱心倡议书范文
2014/05/12 职场文书
建筑投标担保书
2014/05/20 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技