jQuery 未捕获的错误:工具提示小部件实例没有这样的方法“显示”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17458224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 19:07:21  来源:igfitidea点击:

Uncaught Error: no such method 'show' for tooltip widget instance

jquerytwitter-bootstraptwitter-bootstrap-railstwitter-bootstrap-tooltip

提问by dennismonsewicz

I am using ajax to submit a form for my registration, but am having an issue trying to setup tooltips to display error messages for errors that come back from the controller.

我正在使用 ajax 提交我的注册表单,但是在尝试设置工具提示以显示控制器返回的错误的错误消息时遇到问题。

JavaScript:

JavaScript:

$(document).on('ajax:success', '.user_modal_form', function(e, data, status, xhr) {
  var context;
  context = $(this);
  if (data.success) {
    $('button', context).hide();
    $('.spinner', context).show();
    location.reload();
  } else {
    if (data.errors != null) {
      $.each(data.errors, function(key, error) {
        var field;
        field = $("#athlete_" + key);
        field.attr('data-original-title', "" + key + " " + error).tooltip({
          trigger: 'manual'
        }).tooltip("show");
      });
    }
  }
});

Error Message: Uncaught Error: no such method 'show' for tooltip widget instance

错误信息: Uncaught Error: no such method 'show' for tooltip widget instance

回答by Bogdan Lewis

I had the same error, which was a conflict with jQuery UI.

我有同样的错误,这是与 jQuery UI 的冲突。

If you use jQuery UI then you need to reorder your script load order.

如果您使用 jQuery UI,那么您需要重新排序您的脚本加载顺序。

My working load order:

我的工作负载顺序:

  • jQuery
  • jQuery UI
  • Bootstrap
  • jQuery
  • 用户界面
  • 引导程序

回答by pymen

The rootof this and similar problem

这个和类似问题的根源

"no such method 'hide' for tooltip widget instance"

“工具提示小部件实例没有这种方法'隐藏'”

that both JqueryUI and Boostrap have tooltipmethod,

JqueryUI 和 Boostrap 都有工具提示方法,

JqueryUIworks like:

JqueryUI 的工作原理如下:

$el.tooltip("option","show");
$el.tooltip("option","hide");

Boostrapworks like:

Boostrap 的工作原理如下:

$el.tooltip("show");
$el.tooltip("hide");

So, as Bogdan Lewisshowed you need to reorder your scripts, for example with requirejs, you need to make Boostrapbe loaded after JqueryUI

因此,正如Bogdan Lewis所示,您需要重新排序脚本,例如使用requirejs,您需要在JqueryUI之后加载Boostrap

var $ = require('jquery');
require('jquery_ui');
require('bootstrap');

and adjust configfor requirejs like:

并调整requirejs 的配置,例如:

    bootstrap: {
        deps: ['jquery', 'jquery_ui']
    },

回答by theV0ID

The easiest solution for me was just to remove the tooltipscomponents from the jQuery UI distribution I downloaded.

对我来说,最简单的解决方案是从我下载的 jQuery UI 发行版中删除工具提示组件。

回答by Qu?c V?

Load order:

加载顺序:

1. jQuery
2. jQuery UI
3. $.fn.uitooltip = $.fn.tooltip;
4. Bootstrap
5. $.fn.bttooltip = $.fn.tooltip;

or:

或者:

1. jQuery
2. Bootstrap
3. $.fn.bttooltip = $.fn.tooltip;
4. jQuery UI
5. $.fn.uitooltip = $.fn.tooltip;

=> Using:

=> 使用:

1. $el.uitooltip //jQuery
2. $el.bttooltip //Bootstrap