$(...).popover 不是函数答案

【问题标题】：$(...).popover is not a function$(...).popover 不是函数
【发布时间】：2015-07-06 19:06:45
【问题描述】：

我在这里浏览了很多关于这个问题的帖子，但似乎没有一个能解决我的问题。

我已经以正确的顺序导入了 jQuery 和 Bootstrap js 文件。诸如引导面板之类的东西对我来说工作得很好。

我的脚本导入是这样的：

   <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">

但是，当我尝试时

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

我在 Chrome 控制台中收到以下消息：

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

起初我以为可能 popover 没有包含在 CDN 的副本中，所以我继续下载了一个本地副本，其中包含了这里包含的所有插件：

http://getbootstrap.com/customize/

并得到相同的错误消息（将脚本标签重新指向本地 js 文件）。

在 bootstrap.min.js 文件中搜索“popover”：

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

显示弹出框包含在文件中。

【问题讨论】：

有多个jQuery实例
只需包含您的引导 js，并删除 jquery，然后尝试。
@Tushar 不，不会。如果在 Bootstrap JS 之后包含另一个 jQuery，$ 将被重新定义，$.fn.popover 将不存在。
@SergueiFedorov 您可以在浏览器控制台中尝试jQuery.fn.jquery 并交叉检查您导入的版本
这也是 require.js 之类的东西可以派上用场的地方，以确保即使多次加载也能获得正确版本的库。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

既然你已经声明你已经正确地包含了 jQuery 和其他库，一种可能的情况是页面中可能有多个 jQuery 实例。

所以根据使用的服务器技术，搜索 jQuery 的重复版本，如果有任何删除它们（如果不需要，则必须考虑 noConflict() 使用）。

如果出现重复的 jQuery 实例，问题是插件所附加的 jQuery 版本可能与您正在访问以使用该插件的版本不同，此时将找不到该插件。

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

【讨论】：

酷，对于那些使用 AngularJS 和 popover.js 的人，使用 angular.element 而不是 $

【解决方案2】：

包含 bootstrap.js 和 jquery.js 的顺序很重要。在 bootstrap.js 之前包含 jquery.js

【讨论】：

这应该是对答案或问题好友的评论。为您投票，这样您就更接近“评论”权限了。
这解决了我的问题，它还删除了另一个错误，即“未捕获的类型错误：无法读取未定义的属性 'fn'”，该错误刚刚显示在控制台中。
这绝对有资格回答，因为它解决了我的错误。谢谢@Samir Kulkarni。

【解决方案3】：

从 Bootstrap 5 开始，这是添加弹出框的方式按钮代码：

<button type="button" class="btn btn-secondary mx-2" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
      Your Cart(<span id="cart">0</span>)
      </button>

脚本：

<script type="text/javascript">
      var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
      var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
      return new bootstrap.Popover(popoverTriggerEl);
    });
    </script>

【讨论】：

【解决方案4】：

遇到同样的问题并检查了 jquery 版本。迁移到 v1.12 对我有帮助

【讨论】：

【解决方案5】：

对我有用的是调用 $.noConflict() 来返回对 $ 的控制。这是因为其他一些 JavaScript 库使用 $ 作为函数或变量名，就像 jQuery 一样。在 jQuery 初始化期间，保存了一些旧的 $ 引用。 noConflict() 恢复它们。

$noConflict();
jQuery(document).ready(function ($) {
$("#id").popover('hide');
});

【讨论】：

我应该把这段代码放在哪里？
@dapidmini 您可以将代码放在您将用于使用弹出框的页面的脚本之一中。如果您在 HTML 页面上编写脚本，只需有一个文档就绪函数和其中的 popover 方法。

【解决方案6】：

这是由于不同版本的引导程序而发生的在这种情况下，请使用与您的引导程序相同版本的脚本

在其他情况下不推荐使用 jquery。 insted 使用 Advance Css Js

这也会发生，因为最新的引导程序没有'

【讨论】：

请检查您的答案的拼写:)

【解决方案7】：

几个小时后，我发现我忘记将 bootstrap.js 文件附加到我的页面；）

【讨论】：