Bootstrap $(...).popover不是函数

332nm8kg  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(9)|浏览(306)

我已经看了相当多的职位在这里处理这个问题,但他们似乎都没有解决我的问题。
我已经按照正确的顺序导入了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

显示文件中包含弹出窗口。

k2fxgqgv

k2fxgqgv1#

由于您已经声明正确地包含了jQuery和其他库,因此一种可能的情况是页面中可能存在多个jQuery示例。
因此,根据使用的服务器技术,搜索jQuery的重复版本,如果有,请删除它们(如果不需要,则必须考虑使用noConflict())。
如果出现重复的jQuery示例,问题是插件所附加的jQuery版本可能与您正在访问以使用插件的版本不同,此时将找不到插件。

e4yzc0pl

e4yzc0pl2#

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

r8uurelv

r8uurelv3#

对于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>
iibxawm4

iibxawm44#

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

jpfvwuh4

jpfvwuh45#

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

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

mnowg1ta6#

假设您在站点中正确添加了弹出窗口脚本。
修正了"$(...). popover不是函数"的错误。有时候只要添加一个定时器延迟就可以修正它。

$('[data-toggle="popover"]').popover();
    • 修改为**
setTimeout((function() { 
  $('[data-toggle="popover"]').popover();
}),500);

有时(总是)网页没有完全呈现内容,弹出窗口会给出这个错误。所以,我们需要500ms的延迟启动弹出窗口脚本。有时500ms不足以等待渲染,所以可以根据需要修改更多的延迟。
即使在bootstrap 5中也存在此问题

    • 结论**

POPOVER脚本启动需要等待整个页面完全呈现。

wvmv3b1j

wvmv3b1j7#

因此,根据使用的服务器技术,搜索jQuery的重复版本,如果有,则删除它们(如果不需要,则必须考虑使用noConflict())。

flvtvl50

flvtvl508#

这是由于 Bootstrap 的版本不同造成的。在这种情况下,请使用与 Bootstrap 版本相同的脚本
在其他情况下,不建议使用jquery。
这也是由于最新 Bootstrap 不'

tez616oj

tez616oj9#

几个小时后,我发现我忘记将bootstrap.js文件附加到我的页面;)

相关问题