Tooltipster突然无法正常工作

时间:2015-10-09 22:20:20

标签: javascript jquery tooltipster

我一直在尝试使用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以查看工具提示是否会再次开始工作时,结果是一样的。

2 个答案:

答案 0 :(得分:1)

你有一些问题。

关于xbbcode

您好像已经删除了Javascript调用以实际初始化XBBCODE。

将以下内容添加到您的javascript中将对其进行排序:

   $('.bbcode').each(function(){
       var $this = $(this);
       var myText = $this.html();
       var result = XBBCODE.process({
            text: myText
        }); 
       $this.html(result.html);
   });

关于工具提示

  1. 您需要包含可以下载的here
  2. CSS文件
  3. 将初始化代码更改为:
  4.   $('.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');
                }
            }
        });
    

答案 1 :(得分:-1)

我没有受过教育的是,具有“item”类的对象对于工具提示无效。

如果我知道HTML代码,我就能做出更好的猜测。