$(...).popover is not a function

Question

I have looked through quite a few posts on here dealing with this issue, but none of them seem to solve my problem.

I have imported the jQuery and Bootstrap js files in the right order. Things such as bootstrap panels are working perfectly fine for me.

My script imports are like this:

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 

However, when I try

 $('[data-toggle="popover"]').popover(); 

I get the following message in the Chrome console:

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

At first I thought maybe popover was not being included in CDN's copy, so I went ahead and downloaded a local copy with all the plugins included from here:

http://getbootstrap.com/customize/ 

and got the same error message (re-pointed the script tags towards the local js file).

Doing a search for "popover" the bootstrap.min.js file:

http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js 

Shows that popover is included in the file.

Answer 1

Since you have stated you have included jQuery and the other libraries correctly, 1 possible case is there could be multiple instances of jQuery in the page.

So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).

In case of duplicate jQuery instances the problem is the jQuery version to which the plugin is attached might be different from the one which you are accessing to use the plugin at that point the plugin will not be found.

• https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Answer 2

The order of including bootstrap.js and jquery.js matters. Include the jquery.js BEFORE bootstrap.js