未捕获的类型错误：$(...).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>

原文由 Amadeu Cabanilles 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Patrick Moore 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Leo 发布，翻译遵循 CC BY-SA 3.0 许可协议