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

Question

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

加载 1 个 JSP 时出现此错误

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

这是我加载的所有内容，我一一检查，所有内容都已加载

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

Answer 1

我们可以看看你在哪里使用 $.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()

Answer 2

请注意，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>

Answer 3

这可能是由于 jQuery 的版本。至少是我，我这样解决了这个问题。我使用的是 jQuery 3.3.1。当我将 django 更改为 1.10.3 后，问题就解决了。添加这个，

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

它需要工作。

Answer 4

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

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

如果您没有 1.9 或更高版本的 jQuery UI，您将收到错误消息：tooltip() is not a function()。

Answer 5

因为jQuery 3.5.1 越来越大，加载需要更多时间，除了这个问题的许多答案中提到的 JavaScript 文件的顺序之外，除了固定顺序之外的方法并非总是有效，对于Bootstrap tooltip option，解决方法是使用基于jQuery 加载时间的超时，例如：

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 

Answer 6

要解决这个问题，您必须添加到您的 gemfile：

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

那么你就不会有 jquery-ui 不再加载的问题另一个解决方案是在 application.js 中 require("bootstrap") 似乎除了 import("bootstrap") 并且你已经安装了 jquery 和用纱线引导我也觉得这很疯狂