Question

我正在使用jQuery和Simple Tooltip插件。（http://dev.mariusilie.net/content/simple-tooltip-jquery-plugin）

我有一个循环遍历表格单元格的函数，检查是否存在匹配项，然后设置title元素，然后调用简单的工具提示插件。

当页面最初加载时，这非常有效。当我尝试更改标题元素而不重新加载整个页面时，会出现问题。我可以确认单元格的标题元素确实已更新，但使用chrome检查它，但当鼠标悬停在单元格上时，工具提示仍会显示旧值。

我很确定这是jQuery的一个基本部分，我只是误解了。任何投入将不胜感激。

编辑：好的，我想我看到了什么，虽然我不知道如何解决它。我曾经打电话给$（cell）.simpletooltip（）;它将.hover添加到该元素。我猜测对于已经附加.hove的元素的每次后续调用都要么失败要么正在添加它但是第一个仍然存在并且是鼠标悬停时触发的那个。好像我需要删除第一个功能..

这是Simple Tool Tip插件：

/**
*
*   simpleTooltip jQuery plugin, by Marius ILIE
*   visit http://dev.mariusilie.net for details
*
**/
(function($){ $.fn.simpletooltip = function(){
    return this.each(function() {
        var text = $(this).attr("title");
        $(this).attr("title", "");
        if(text != undefined) {
        $(this).hover(function(e){
            var tipX = e.pageX + 12;
            var tipY = e.pageY + 12;
            $(this).attr("title", ""); 
            $("body").append("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: none;'>" + text + "</div>");
            if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)
            else var tipWidth = $("#simpleTooltip").width()
            $("#simpleTooltip").width(tipWidth);
            $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
        }, function(){
            $("#simpleTooltip").remove();
            $(this).attr("title", text);
        });
        $(this).mousemove(function(e){
            var tipX = e.pageX + 12;
            var tipY = e.pageY + 12;
            var tipWidth = $("#simpleTooltip").outerWidth(true);
            var tipHeight = $("#simpleTooltip").outerHeight(true);
            if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
            if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
            $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
        });
    }
});
}})(jQuery);

以下是我的代码：

 // Iterate over each cell for the day and assign a category css class to each.
    $('table.tstat_program_hours td[data-day=' + dayOfWeek + ']').each(function(index, elem) {
        var cell = $(this);
        var cellHour = cell.attr('data-hour');

        var tempTitleInLoop = '';

        if (cellHour < data['wake_time']) {
            tempTitleInLoop = 'Night';
            cell.attr('title',tempTitleInLoop);
        }   

        /* set the wake */
        if(cellHour < data['morning_time']&&cellHour >= data['wake_time']) {
            tempTitleInLoop = 'Wake';
            cell.attr('title',tempTitleInLoop);
        }

        /* set the morn */
        if(cellHour < data['evening_time']&&cellHour >= data['morning_time']) {
            tempTitleInLoop = 'Day';
            cell.attr('title',tempTitleInLoop);
        }

        /* set the evening */
        if(cellHour < data['night_time']&&cellHour >= data['evening_time']) {
            tempTitleInLoop = 'Eve';
            cell.attr('title',tempTitleInLoop);

        }

        /* set the night */
        if(cellHour >= data['night_time']) {
            tempTitleInLoop = 'Night again';
            cell.attr('title',tempTitleInLoop);
        }



        $(cell).simpletooltip();

Answer 1

尝试$(cell).unbind().simpletooltip();

哪个应该从该元素中删除onMouseOver事件。

jQuery - 使用SimpleToolTip插件

1 个答案: