工具提示器突然不工作了
Tooltipster suddenly not working
我一直在为一个需要工具提示的网站尝试使用jQuery插件。当鼠标悬停时,工具提示使用AJAX提供数据,在我为项目添加工具提示部分之前,一切都工作得很好。在添加代码并保存后,我注意到工具提示和一些jQuery元素不再工作(xbbcode插件也停止工作,但bootstrap,颜色选择器和放大仍然工作良好)。
我回去并删除了代码,看看我是否做错了什么,但错误仍然存在!除了额外的工具提示外,我没有改变任何其他东西,所以我不明白为什么突然它现在不起作用了。以下是所使用的代码,包括我试图添加的项目工具提示(在底部针对.item
)。
$(document).ready(function() {
// Retrieve stored data
var bannerData = amplify.store("banner");
var haData = amplify.store("ha");
var petData = amplify.store("pet");
if (bannerData === true) {
$('#banner').addClass('hidden');
$('#banner-collapse').text("Expand [+]");
}
if (haData === true) {
$('#ha').addClass('hidden');
$('#collapse-ha').text("Expand Avatar [+]");
}
if (petData === true) {
$('#pet').addClass('hidden');
$('#collapse-pet').text("Expand Pet [+]");
}
// Section collapse
$('#banner-collapse').click(function () {
if (bannerData === true) {
$('#banner').slideToggle(function () {
$(this).removeClass("hidden");
});
amplify.store("banner", null);
$(this).text(function(i, text) {
return text === "Expand [+]" ? "Collapse [-]" : "Expand [+]";
});
}
else {
$('#banner').slideToggle();
amplify.store("banner", true);
$(this).text(function (i, text) {
return text === "Collapse [-]" ? "Expand [+]" : "Collapse [-]";
});
}
});
// Avatar Collapse
$('#collapse-ha').click(function () {
if (haData === true) {
$('#ha').slideToggle(function () {
$(this).removeClass("hidden");
});
amplify.store("ha", null);
$(this).text(function(i, text) {
return text === "Expand Avatar [+]" ? "Collapse Avatar [-]" : "Expand Avatar [+]";
});
}
else {
$('#ha').slideToggle();
amplify.store("ha", true);
$(this).text(function (i, text) {
return text === "Collapse Avatar [-]" ? "Expand Avatar [+]" : "Collapse Avatar [-]";
});
}
});
// Pet Collapse
$('#collapse-pet').click(function () {
if (petData === true) {
$('#pet').slideToggle(function () {
$(this).removeClass("hidden");
});
amplify.store("pet", null);
$(this).text(function(i, text) {
return text === "Expand Pet [+]" ? "Collapse Pet [-]" : "Expand Pet [+]";
});
}
else {
$('#pet').slideToggle();
amplify.store("pet", true);
$(this).text(function (i, text) {
return text === "Collapse Pet [-]" ? "Expand Pet [+]" : "Collapse Pet [-]";
});
}
});
//Formats date
var now = moment().format("dddd, MMMM Do, <b>h:mm A</b>");
$('#date').append(now);
// Tooltips
$('.tooltip-ha').tooltipster({
animation: 'grow',
delay: 200,
trigger: 'hover',
position: 'right',
contentAsHTML: true,
functionInit: function(origin, content) {
// when the request has finished loading, we will change the tooltip's content
$.ajax({
type: 'GET',
url: '/haTooltip',
success: function(data) {
origin.tooltipster('content', data);
}
});
// this returned string will overwrite the content of the tooltip for the time being
return 'Wait while we load new content...';
}
});
$('.tooltip').tooltipster({
animation: 'grow',
delay: 200,
trigger: 'hover',
position: 'right',
contentAsHTML: true,
functionInit: function(origin, content) {
// when the request has finished loading, we will change the tooltip's content
$.ajax({
type: 'GET',
url: '/petTooltip',
success: function(data) {
origin.tooltipster('content', data);
}
});
// this returned string will overwrite the content of the tooltip for the time being
return 'Wait while we load new content...';
}
});
$('.item').tooltipster({
animation: 'grow',
delay: 200,
trigger: 'hover',
position: 'right',
contentAsHTML: true,
functionInit: function(origin, content) {
// when the request has finished loading, we will change the tooltip's content
$.ajax({
type: 'GET',
url: '/itemTooltip',
success: function(data) {
origin.tooltipster('content', data);
}
});
// this returned string will overwrite the content of the tooltip for the time being
return 'Wait while we load new content...';
}
});
});
我在这里没有看到任何明显的错误,我把所有的插件脚本放在一个文件中,并最小化了加载时间,但是为了弄清楚为什么xbbcode和tooltipster突然不起作用,我继续重新下载了单独的版本。通常在这种情况下,我怀疑tooltipster和xbbcode之间存在某种兼容性错误,但是在添加项目工具提示之前它们工作得很好,当我暂时删除xbbcode以查看工具提示是否会重新开始工作时,结果是一样的。
你有几个问题。
关于xbbcode你似乎已经删除了Javascript调用来实际初始化XBBCODE。
将下面的代码添加到你的javascript中,将会解决这个问题:
$('.bbcode').each(function(){
var $this = $(this);
var myText = $this.html();
var result = XBBCODE.process({
text: myText
});
$this.html(result.html);
});
关于tooltipster - 你需要包含CSS文件,可以在这里下载
- 将您的初始化代码更改为:
$('.item').tooltipster({
content: 'Loading...',
updateAnimation: false,
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
// when the request has finished loading, we will change the tooltip's content
$.ajax({
type: 'POST',
url: 'http://dodsoftware.com/sotests/xbbcode/itemTooltip', // change to your file location
success: function(data) {
origin.tooltipster('content', data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
origin.data('ajax', 'cached');
}
}
});
我的经验是,类为"item"的对象对工具提示无效。
如果我知道HTML代码,我就能猜得更好了。
相关文章:
- jQuery UI自动完成突然停止工作
- 网络工作者突然终止工作
- NetBeans调试突然停止工作
- YouTube视频自动播放在iOS 7.0.4中突然停止工作
- jQuery$(document).ready突然停止工作
- 带有jQuery和YQL的Weather突然停止工作
- 函数在简单的更改后突然停止工作
- 旋转内容突然停止工作
- Rails 3.2.3 JavaScript 突然停止工作
- JQuery 函数突然停止工作,转换 Javascript 参数时出错
- WordPress jQuery灯箱突然不工作
- 角度.js“控制器作为”语法突然停止在 Chrome v. 39.0.2171.95 m 上工作
- 居中弹出窗口突然无法在Chrome中工作
- IE10视频标签突然停止工作
- Twitter引导程序选项卡突然停止工作
- jQuery:脚本突然停止工作
- 突然间,我的BackboneJS收藏不见了;当代码被缩小时,无法在Chrome中工作
- 动画scrollTop突然停止工作
- HTML5本地存储功能在我的IOS Phonegap应用程序中突然停止工作
- 突然,我的表单提交按钮只工作后被点击两次