未捕获的类型错误：$(...) .tooltip不是一个函数。

Question

未捕获的类型错误：$(...) .tooltip不是一个函数。

javascriptjquery

20

我有一个基于Spring Web模型视图控制器（MVC）框架的项目。Spring Web MVC框架的版本是3.2.8，部署在WebLogic Server版本：12.1.2.0.0上。

当我加载1个JSP时，出现以下错误：

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

这是我加载的所有内容，我逐一检查过，它们都已经被加载。

<link href="/tdk/styles/bootstrap.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/admin.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/jquery.dataTables.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/dataTables.bootstrap.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/slides.css" type="text/css" rel="stylesheet">

<script src="/tdk/scripts/jquery.min.js" type="text/javascript"></script>
<script src="/tdk/scripts/bootstrap.js" type="text/javascript"></script>
<script src="/tdk/scripts/jquery.dataTables.js" type="text/javascript"></script>
<script src="/tdk/scripts/dataTables.bootstrap.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<script type="text/javascript">
  $(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
    var selected = [];
    var table = $('#example').DataTable({
      "dom": '<"top">rt<"bottom"lp><"clear">',
      "autoWidth": false,
      "paging": false,
      "scrollX": false,
      "scrollY": 300,
      "scrollCollapse": true,
      "rowCallback": function(row, data) {
        if ($.inArray(data.DT_RowId, selected) !== -1) {
          $(row).addClass('selected');
        }
      },
      "columnDefs": [{
        "targets": 'nosort',
        "orderable": false
      }, ]
    });
    $('#example tbody').on('click', 'input', function() {
      $(this).closest("tr").toggleClass('selected');

      if ($(this).is(':checked')) {
        var theNameOfSelectedProduct = $(this).closest("tr").find("td.productname").text();
        $('#selecteddevices').val($('#selecteddevices').val() + " " + theNameOfSelectedProduct);
        $('#actions4devices button').removeAttr("disabled");
      } else {
        var theNameOfSelectedProduct = $(this).closest("tr").find("td.productname").text();
        $('#selecteddevices').val($('#selecteddevices').val().replace(theNameOfSelectedProduct, ""));
        if ($('#selecteddevices').val().trim().length == 0) {
          $('#actions4devices button').not('.pull-right').attr("disabled", "disabled");
        }
      }
    });
    $('#refusedevicesButtonId').on('click', function() {
      $('#theRefuseFile').show();
    });
  });
</script>

- Amadeu Cabanilles

在加载jQuery UI脚本的位置上，调用.tooltip的脚本是在哪里加载的？ - Marie

3

不需要重复加载jquery-ui。 - charlietfl

6个回答

6

请注意，jquery-ui有自己的.tooltip()函数，Bootstrap也有。

尝试重新排列你的js文件，例如：

<script src="/tdk/scripts/jquery.min.js"              type="text/javascript"></script>
<!-- Jquery - ui right after-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/tdk/scripts/bootstrap.js"                 type="text/javascript"></script>
<script src="/tdk/scripts/jquery.dataTables.js"         type="text/javascript"></script>
<script src="/tdk/scripts/dataTables.bootstrap.js"  type="text/javascript"></script>

- Leo

2

如果您正在使用Bootstrap的tooltip()函数，您可能希望构建自己的jQuery UI版本，不包括tooltip()但保留您需要的部分。 - Patrick Moore

正如@PatrickMoore所建议的，您可以下载一个没有tooltip()的新版本。您可以在此处下载https://jqueryui.com/download/。 - Leo

2

这不会导致 "is not a function" 错误。它只会调用错误的函数。 - Chloe

1

@Chloe 我不知道为什么会被踩，如果它可以成为这个问题的有效答案。 - Leo

3

很可能是由于jQuery版本的原因。至少我遇到了这个问题，并且我通过以下方式解决了这个问题。我使用的是jQuery 3.3.1。当我将django更改为1.10.3时，问题得到解决。添加此内容：http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js。它需要工作。

- nifitovich

一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。 - mrun

哦天啊，这让我头疼了好久。为什么会出现这个问题！！！感谢您的评论。 - rtconner

1

tooltip()在jQuery UI版本1.9中才被添加。证明...

添加的版本：1.9（来源：API.jQueryUI.com：Tooltip Widget）。

如果您没有1.9或更高版本的jQuery UI，您将收到错误消息：tooltip()不是一个函数()。

- HoldOffHunger

1

由于 jQuery 3.5.1 越来越大，加载时间也变得更长。除了多个答案中提到的 JavaScript 文件的顺序，还有一个解决方法是使用超时基于 jQuery 加载时间的工作方式，这样做可以解决 Bootstrap 工具提示选项 的问题。例子如下：

setTimeout(function () {
        $("[title]").tooltip({
            container: "body",
            placement: "top",
            delay: { show: 240, hide: 60 }
        });

        $("[title]").on("click", function () {
            $(this).tooltip("hide");
        });
    }, 545*1.33); // 545ms timing to load jQuery.js + network estimated delay

- Ashraf Sada

2

这在我的情况下是答案。我有这个错误并尝试了上面的建议。它仍然发生，但我无法可靠地重复它。实际上，我的连接速度与之存在相关性。实施setTimeout解决了它。 - Milo Persic

-1

要解决这个问题，你需要在你的gemfile中添加以下内容：

gem 'jquery-ui-rails'
gem 'jquery-ui-themes'

那么你就不会再遇到jquery-ui无法加载的问题了。另一个解决方案是在application.js中要求("bootstrap")，似乎除了import("bootstrap")之外，你还需要使用yarn安装jquery和bootstrap。我认为这一切都相当疯狂。

- Mices

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Patrick Moore · Accepted Answer

你能不能告诉我们在哪里使用了$.tooltip()？可能出现在jQuery UI嵌入行的前面。请尝试重新排列脚本包含顺序，使jQuery排在第一位，jQuery UI排在第二位，然后再继续进行。

<script src="/tdk/scripts/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/tdk/scripts/bootstrap.js" type="text/javascript"></script>
<script src="/tdk/scripts/jquery.dataTables.js" type="text/javascript"></script>
<script src="/tdk/scripts/dataTables.bootstrap.js" type="text/javascript"></script>

没有看到您的完整代码和哪些文件包含了您对 $.toolTip() 的调用，很难知道问题出在哪里。

另一个快速尝试的方法是将您正在使用的 $ 替换为 jQuery，即：

$(".tips").toolTip()

将变成：

jQuery(".tips").toolTip()