“初始化前无法在工具提示上调用方法”错误，当我添加 jquery-ui 库时

'cannot call methods on tooltip prior to initialization' error when I add the jquery-ui library

本文关键字：错误 库时 jquery-ui 添加 方法 调用 初始化 工具提示      更新时间：2023-09-26

当我将 jquery-ui 库添加到加载的脚本时，我收到"初始化前无法在工具提示上调用方法"错误。没有它，一切正常。

这可能是什么原因？

错误：

Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'show'
n.extend.error @ jquery.min.js:2
(anonymous function) @ jquery-ui.min.js:6
n.extend.each @ jquery.min.js:2
n.fn.n.each @ jquery.min.js:2
e.fn.(anonymous function) @ jquery-ui.min.js:6
(anonymous function) @ scrolltop.js:20
i @ jquery.min.js:2
j.fireWith @ jquery.min.js:2
n.extend.ready @ jquery.min.js:2J @ jquery.min.js:2

我在页面底部加载的脚本是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="{{ asset('assets/js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/vendors/livicons/minified/raphael-min.js') }}"></script>
<script src="{{ asset('assets/vendors/livicons/minified/livicons-1.4.min.js') }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> //If I remove this everything works fine.
<script type="text/javascript" src="{{ asset('assets/js/frontend/scrolltop.js') }}"></script>//If I remove this but and keep jqueryui I also dont get error.

我的滚动顶部.js代码是：

$(document).ready(function(){
     $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('#back-to-top').fadeIn();
            } else {
                $('#back-to-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-to-top').click(function () {
            $('#back-to-top').tooltip('hide');
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
        $('#back-to-top').tooltip('show'); //This is the line that seems to trigger the error.
});
$(document).ready(function() {
        $(".dropdown").hover(
            function() {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("fast");
                $(this).toggleClass('open');
            },
            function() {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("fast");
                $(this).toggleClass('open');
            }
        );
    });

我遇到了同样的问题，这是我拥有脚本的顺序。这就是对我有用的东西。

<script src="~/Scripts/jquery-3.1.0.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
我相信

问题是jquery-ui和bootstrap.js相互冲突。

jQuery UI 工具提示

和 Bootstrap 工具提示之间存在冲突。 最简单的方法是在没有工具提示的情况下获取jQuery UI。

function initTolltip() {
        /*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
        //if ($.ui !== undefined && $.ui.tooltip !== undefined) {
        //    if ($.uitooltip === undefined) {
        //        $.widget.bridge("uitooltip", $.ui.tooltip);
        //        //$.widget.bridge("uibutton", $.ui.button);
        //        console.log(jsname + "$.ui.tooltip bridged");
        //    } else {
        //        console.log(jsname + "uitooltip ok", $.uitooltip);
        //    }
        //} else {
        //    console.warn("[" + jsname + "] no $.ui.tooltip");
        //}
        if (window.jQuery.fn.tooltip !== undefined) {
            if ($.fn.bstooltip4 === undefined) {
                if ($.fn.tooltip !== undefined) {
                    //            console.log(jsname + "bootstrapTooltip noConflict", window.jQuery.fn.tooltip, window.jQuery.fn.tooltip.noConflict)
                    var bootstrapTooltip = $.fn.tooltip.noConflict();
                    $.fn.bstooltip4 = bootstrapTooltip;
                    //} else {
                    console.log(jsname + "bstooltip4 bridged");
                    //ajaxinitTolltip();
                    //} else {
                    //    console.log(jsname + "bstooltip4 ok", window.jQuery.fn.tooltip)
                    //}
                    // bootstrapTooltip => Bootstrap; $.fn.tooltip => jQuery UI Tooltip
                } else {
                    console.warn("[" + jsname + "] no $.fn.tooltip");
                }
            } else {
                console.log(jsname + "bstooltip4 ok");
                ////clear Tooltips on reload
                //$(".tooltip").hide();
                //console.log(jsname + "hide Tooltips");
            }
        } else {
            if ($.fn.bstooltip4 === undefined) {
                console.warn("[" + jsname + "] window.jQuery.fn.tooltip = undefined");
            } else {
                console.log(jsname + "bstooltip4 allready bridged");
            }
        }
        //initialize all tooltips on page
        if ($.fn.bstooltip4 !== undefined) {
            $("[data-toggle='tooltip']").bstooltip4({ placement: "top" });
            console.log(jsname + "bstooltip4 working");
            //$("[data-toggle="popover"]").popover({ placement: "top" });
        } else if ($.fn.tooltip !== undefined) {
            $("[data-toggle='tooltip']").tooltip({ placement: "top" });
            //$("[data-toggle="tooltip"]").hide();
            console.warn("[" + jsname + "] bstooltip4 not working but $.fn.tooltip ok");
        } else {
            console.warn("[" + jsname + "] tooltip and bstooltip4 not working at all");
        }
        //clear Tooltips on reload
        $(".tooltip").hide();
        console.log(jsname + "clear all Tooltips");
        //console.log(jsname + "body click initTooltip");
        //$("body").on("click", function (e) {
        //$("[data-toggle="tooltip"]").each(function (e) {
        //    //the "is" for buttons that trigger popups
        //    //the "has" for icons within a button that triggers a popup
        //    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $(".tooltip").has(e.target).length === 0) {
        //        //if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $(".popover").has(e.target).length === 0) {
        //        //console.log(jsname + "popover hide" + e);
        //        //$(this).popover("hide");
        //        console.log(jsname + "tooltip hide", e);
        //        $(this).hide();
        //    }
        //});
        //});
    }
相关文章：