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

标签 javascript jquery ruby-on-rails twitter-bootstrap

我无法从我的 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/

上一篇：javascript - 如何将索引二维数组从 PHP 返回到 JavaScript

下一篇：javascript - 如果我需要数 9,007,199,254,740,993 怎么办？

相关文章：

javascript - rails : Extra column when using wice_grid

javascript - 如何防止在表单验证中单击 Enter 按钮时多次提交表单

javascript - 如何在Select2 4.0.6-rc.1 full中用js改变背景颜色

javascript - 完成 ajax 调用数组的循环，而不是因调用之一的错误而中断

javascript - 提升导致 jQuery 中的问题

ruby-on-rails - Rails 过滤器参数过滤过多

ruby-on-rails - 从 Rails 日志中过滤部分或全部请求 URL

javascript - Durandal 路由

javascript - 如何将不同的数据目标分配给不同的选项值，以便显示不同的模型？

javascript - 检测宽度并使用响应式图像

©2024 IT工具网  联系我们