Bootstrap-Popover ist keine Funktion

Question

Ich versuche gerade, ein Chrome-Plugin zu entwickeln, das das Vorkommen unterschiedlicher Namen auf jeder besuchten Webseite anzeigt.

Wenn das Plugin einen Namen findet, fügt es im Prinzip ein Symbol hinzu. Wenn Sie darauf klicken, sollte ein Bootstrap-Popover mit weiteren Informationen über die Person angezeigt werden.

Wenn ich versuche, meinen Code auszuführen, bekomme ich diesen Fehler:

VM887:1 Uncaught TypeError: $(...).popover is not a function(…)

Hier ist mein Code:

$('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++; 
    } 
    } 
} 

Ich habe schon viel gesucht, aber ich war nicht in der Lage zu finden Irgendeine Reparatur für dieses Problem.

Mit freundlichen Grüßen

Florian

Answer 1

Ich denke, dass es ist, weil, wenn Sie die Methode aufrufen popover das Bootstrap-Skript noch nicht geladen.

Sie haben 2 Möglichkeiten:

1. auf die Methode aufzurufen $(window).load-http://output.jsbin.com/qoteqe
2. Fügen Sie die Bootstrap und jQuery Referenzen im DOM und sie nicht im Skript laden: http://output.jsbin.com/tamoda

Übrigens: warum fügen Sie eine weitere jQuery-Referenz hinzu? Wenn Sie $('head').append verwenden, haben Sie bereits jQuery in Ihrer Seite. Ist das nicht?