Question

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

我在加载1个JSP时遇到此错误

未捕获TypeError：$（...）。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的版本。至少是我和我这样解决了这个问题。我使用的是jQuery 3.3.1。当我将django更改为1.10.3时，问题解决了。加上这个，

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

需要工作。

Answer 3

由于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 4

tooltip() is not a function() 仅在 jQuery UI 1.9 版中添加到 jQuery UI。证明...

<块引用>

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

如果您没有 1.9 或更高版本的 jQuery UI，您将收到错误：//use a variable to keep track of if the directional light exists bool light = true; document.addEventListener("keydown", onDocumentKeyDown, false); function onDocumentKeyDown(event) { // Get the key code of the pressed key var keyCode = event.which; console.log("l" + keyCode); if (keyCode == 76) { //check the status of the variable to decide what to do, //and update its status if (light) { scene.remove(directionalLight); light = false; } else { scene.add(directionalLight); light = true; } } render(); }。

Answer 5

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

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

那么你就不会有 jquery-ui 不再加载的问题了另一个解决方案是在 application.js 中 require("bootstrap") 除了 import("bootstrap") 之外，你已经安装了 jquery 和用纱线引导程序我认为这一切都非常疯狂

Answer 6

请注意jquery-ui有自己的.tooltip（）函数，而Bootstrap也有。{/ p>

尝试重新排序您的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>

未捕获的TypeError：$（...）。tooltip不是函数

6 个答案: