引导弹出窗口不是一个函数

Bootstrap popover is not a function

本文关键字:一个 函数 窗口      更新时间:2023-09-26

我目前正在尝试开发一个Chrome插件,发现每个访问的网页内出现不同的名称。

当插件找到一个名称时,它基本上会在它旁边添加一个图标。当点击,一个引导弹出窗口应该出现更多的信息,关于这个人。

当我尝试运行我的代码时,我得到这个错误:

VM887:1 Uncaught TypeError: $(…)。弹出窗口不是一个函数(…)

下面是我的代码:
$('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++;
    }
  }
}

我已经搜索了很多,但我没能找到任何解决这个问题的方法。

亲切的问候,

Florian

我认为这是因为当你调用方法popover的引导脚本尚未加载。

你有两个选择:

  1. $(window).load上调用方法- http://output.jsbin.com/qoteqe
  2. 在DOM中包含bootstrap和jQuery引用,而不是在脚本中加载它们:http://output.jsbin.com/tamoda

顺便说一下为什么要添加另一个jQuery参考?如果你正在使用$('head').append显然你有jQuery在你的页面已经。不是吗?