个人中心
gpt4 book ai didi

javascript - 调用 Bootstrap 函数时为 "Uncaught TypeError: undefined is not a function"

转载 作者：行者123 更新时间：2023-11-30 05:33:48 25 4
gpt4 key购买 nike

我无法从我的 Rails 应用程序调用 bootstrap-java 函数。目前，我正在尝试获得一个带有一些工具提示的简单示例。

但奇怪的是 Bootstrap 菜单等工作正常，所以必须集成 Bootstrap gem 好吗？

这是我的 View 代码:

<head>
<script type="text/javascript">
$(document).ready(function(){
    $(".tooltip-examples a").tooltip({
        placement : 'top'
    });
});
</script>
</head>

<body>
<div class="bs-example"> 
    <ul class="tooltip-examples list-inline">
        <li><a href="#" data-toggle="tooltip" data-original-title="Default tooltip">Tooltip</a></li>
    </ul>
</div>
</body>

还有我的 application.js:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

但是当我加载页面时，浏览器控制台 (Chrome) 返回:

Uncaught TypeError: undefined is not a function

在这一行:

$(".tooltip-examples a").tooltip({

好像找不到 tooltip() 函数？

编辑:我只是注意到当我尝试调用 fancybox gems javascript 函数时它返回相同的错误。这可能有关系吗？也许是我的 Rails 设置的普遍问题？

编辑 2

这是完整生成的 HTML 代码(我删除了 .css 包含和导航):

<html>
<head>
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/core.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/widget.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/accordion.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/position.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/menu.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/autocomplete.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/datepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/mouse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/draggable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/resizable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/dialog.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/droppable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-blind.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-bounce.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-clip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-drop.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-explode.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-fade.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-fold.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-highlight.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-size.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-scale.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-puff.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-pulsate.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-shake.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-slide.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/effect-transfer.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/progressbar.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/selectable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/selectmenu.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/slider.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/sortable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/spinner.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/tabs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/about.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/admin.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/project_posts.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/projects.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/static_pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/welcome.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="ANhRc1muZwg+kQ6D2byl4OJPeRjwHEEEjgv4v+reTgA=" name="csrf-token" />

</head>
<body>


<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        NAVIGATION...
</nav>

<head>
<script type="text/javascript">
jQuery(document).ready(function(){
    $(".tooltip-examples a").tooltip({
        placement : 'top'
    });
});
</script>
</head>

<body>
<div class="bs-example"> 
    <ul class="tooltip-examples list-inline">
        <li><a href="#" data-toggle="tooltip" data-original-title="Default tooltip">Tooltip</a></li>
    </ul>
</div>
</body>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

</body>
</html>

最佳答案

也尝试添加

//= require jquery-ui

编辑

尝试将 bootstrap 导入移动到 jquery 导入之上

也可能值得更改为 https://github.com/twbs/bootstrap-sass用于导入 Bootstrap 。不确定它是否更好，但它是我通常使用的没有问题的那个

进一步编辑

对于那些使用 Rails 的人来说，这已经在 bootstrap.js.coffee 中用 $(".tooltip").tooltip() 定义了。只需确保在您的 application.js 中包含 //= require bootstrap

所以也许尝试删除你的

$(document).ready(function(){
    $(".tooltip-examples a").tooltip({
        placement : 'top'
    });
});

看看有没有效果

关于javascript - 调用 Bootstrap 函数时为 "Uncaught TypeError: undefined is not a function"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25232601/

25 4 0
文章推荐： javascript - 我如何进行部分更新或其他方法来更新 PouchDb 中的复杂文档？
文章推荐： javascript - 如果我需要数 9,007,199,254,740,993 怎么办？
文章推荐： javascript - 如何将索引二维数组从 PHP 返回到 JavaScript
文章推荐： c++ - QDir 提供了正确的文件，但显示的数量不正确
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com