引导程序弹出窗口不起作用 [英] Bootstrap popover is not a function
问题描述
我目前正在尝试开发一个Chrome插件,以发现每个访问的网页中出现的不同名称.
I am currently trying to develop a Chrome plugin that spots occurrences of different names inside each visited web page.
当插件找到名称时,它基本上会在其旁边添加一个图标.单击后,将显示一个引导弹出窗口,其中包含有关此人的更多信息.
When the plugin finds a name, it basically adds an icon next to it. When clicked, a bootstrap popover should appear with more information about the person.
当我尝试运行代码时,出现此错误:
When I try to run my code, I get this error:
VM887:1未捕获的TypeError:$(...).popover不是函数(...)
VM887:1 Uncaught TypeError: $(...).popover is not a function(…)
这是我的代码:
$('head').append('<script async src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>\
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>');
$(document).ready(function(){
var name = "Nicolas";
// console.log('Document is ready.. scanning for politicians...');
//var hashmap = db_reader.getHashMap();
var counter = {i: 0}; //Occurences. Singleton to be passed by reference and not by value.
$('p').each(function(index) {
addImage(this, counter);
});
$('li').each(function(index) {
addImage(this, counter)
});
$('head').append(
"<script>$(function(){$('[data-toggle=\"popover\"]').popover();});\
</script>"
);
});
function addImage(context, counter) {
var body = $(context).text();
var word;
var reg = /[A-Z]+[a-z]*/gm;
while(word = reg.exec(body)){
// console.log("while");
if(word == name){
// console.log(word);
var image = '<a href="#" data-toggle="popover" title="Popover Header" data-content="A wonderful content" id="popover'+counter.i+'" class="politicianFind">\
<img alt="name" src="https://s15.postimg.org/pei4ci3fv/fdp.png">\
</a>';
// console.log("Replacing HTML");
$(context).html(body.replace(word, word + " " + image));
counter.i++;
}
}
}
我已经进行了很多搜索,但是找不到针对此问题的任何解决方法.
I have already searched a lot but I wasn't able to find any fix for this issue.
亲切的问候,
弗洛里安
推荐答案
我认为这是因为当您调用方法popover
时,引导脚本尚未加载.
I think that it's because when you call the method popover
the bootstrap script not yet loaded.
您有2个选项:
- 要在
$(window).load
上调用方法- http://output.jsbin.com/qoteqe - 在DOM中包含引导程序和jQuery引用,而不在脚本中加载它们: http://output.jsbin .com/tamoda
- To call the method on
$(window).load
- http://output.jsbin.com/qoteqe - Include the bootstrap and jQuery references in the DOM and not load them in the script: http://output.jsbin.com/tamoda
顺便说一句,为什么还要添加另一个jQuery引用?如果您显然使用$('head').append
,则页面中已经包含jQuery.不是吗?
By the way why do you add another jQuery reference? If you are using $('head').append
clearly you have jQuery in your page already. Isn't?
这篇关于引导程序弹出窗口不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!