Question

我在使用rails应用程序调用bootstrap-java函数时遇到问题。目前，我正在尝试使用一些工具提示来实现一个简单的示例。

奇怪的是，引导菜单等工作正常，所以引导宝石必须集成好吗？

以下是我的观点代码：

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

Answer 1

尝试添加

// = require jquery-ui

修改

尝试在jquery导入

上方移动引导程序导入

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

进一步编辑

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

中加入//= require bootstrap即可

所以也许尝试删除你的

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

看看它是否有效

Answer 2

将Jquery js文件放在boostraps链接

之上

＆＃34;未捕获的TypeError：undefined不是函数＆＃34;在调用bootstrap函数时

2 个答案: