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的25个步骤 千倍级效率提升
Feb 11 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
详解从Vue-router到html5的pushState
Jul 21 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
测量JavaScript函数的性能各种方式对比
Apr 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
php定义参数数量可变的函数用法实例
2015/03/16 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python和pyqt实现360的CLable控件
2014/02/21 Python
Python线程同步的实现代码
2018/10/03 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
浅谈python锁与死锁问题
2020/08/14 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
办公设备采购方案
2014/03/16 职场文书
服务标语口号
2014/07/01 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
暑假生活随笔
2015/08/15 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS