当我将 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();
// }
//});
//});
}