在Bootstrap popover内部执行JS
Execute JS inside of a Bootstrap popover
我正试图将表单放置在引导程序中,所有的html都很好地呈现在其中,但不执行任何JavaScript(日期选择器)。
这是html代码:
<button type="button" class="btn btn-lg btn-danger" data-html='true' data-toggle="popover" title="Popover title" data-content='
Html Form code
'>Click to toggle popover</button>
JS:
$('[data-toggle="popover"]').popover()
我建议在属性中使用选择器
html:
<button type="button" class="btn btn-lg btn-danger" data-popover-content="#mypop" data-toggle="popover" data-trigger="focus">Popover Example</button>
<div class="hidden" id="mypop">
<div class="popover-heading">
This is the heading
</div>
<div class="popover-body">
This is the body
</div>
</div>
js:
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
setTimeout(function(){ console.log('execute'); },500);
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
链接演示:https://jsfiddle.net/xz45cnt4/
在id mypop 中使用class hidden
在引导程序文档中:
消毒:启用或禁用消毒。如果激活了"template","content"answers"title"选项将被清除。
这意味着所有javascript都将被删除。
在bootstrap.js>函数setElementContent(…
if (this.config.html) {
if (this.config.sanitize) {
content = sanitizeHtml(content, this.config.whiteList, this.config.sanitizeFn);
}
$element.html(content);
} else {
$element.text(content);
}
默认值为true,因此:
$(SomeNodeElement).popover({
html: true,
sanitize: false,
content: someElem.innerHMTL //or whatever
})
相关文章:
- Meteor:插入集合后如何执行JS
- 如何在Odoo 9中执行JS文件中的函数
- 匿名自执行js函数内部的全局变量在外部仍然可用
- NumericTextBox-当用户键入数字时执行JS计算.能做到吗
- 引导:响应式设计-当窗口大小从980px调整到979px时执行JS
- 对页面上的所有ID执行JS功能
- 从浏览器访问页面时执行js函数's后退按钮
- 源代码未完全执行.(JS)
- 在执行JS脚本后监视对DOM的更改
- 在表单同步提交后执行 js 吗?
- 在 ubuntu 14.04 VPS 上执行.js文件错误
- 从PHP插入时在MongoDB上执行JS
- 在将ajax内容应用到元素后执行js函数
- Windows Phone浏览器控件执行JS函数来替换src属性
- 到达新页面后执行js
- 用C#在Win 8.1 Chakra中执行JS的一个失败的最小例子
- 在sharepoint显示模板中执行JS
- 在Bootstrap popover内部执行JS
- 从引导程序popover内容内部执行js
- 顺序执行js