Question

我正在使用jQuery工具提示来显示动态加载的内容（下面的javascript）。在某些情况下，当鼠标远离元素时，工具提示不会消失。我的理论是，动态内容的加载会引入一些延迟，因此鼠标在工具提示功能完成之前就会远离元素，因此它不会消耗mouseleave事件。有什么方法可以解决这个问题吗？

element.tooltip(
        {
            items: "table.orderlist label",
            open: function (event, ui)
            {
                ui.tooltip.css("max-width", "600px");
                ui.tooltip.css("max-height", "300px");
                ui.tooltip.css("overflow", "hidden");
            },
            content: function (callback)
            {
                //Get the contents as the tooltip is popping up
                MyAjaxCall(iID,
                    function (result)
                    {
                        try
                        {
                            //success
                            callback(result) //returns the result
                        }
                        catch (e)
                        {
                            DisplayError(e);
                        }
                    },
                    function (result)
                    {
                        //Error
                        DisplayError(result);
                    });
            }
        });

Answer 1

您的内容功能应该更复杂，可能的解决方案是：

content: function (callback)
{    
    var $this = $(this), isMouseOn = true; 
    // check if tooltip ajax-request is in progress 
    // really needed for slow scripts only
    if($this.data('tt-busy')) return;
    // check if el is hovered (in jquery <= 1.8 you can simly use .is(':hover')
    $this
        .data('tt-busy', true)
        .on('mouseenter.xxx', function() { isMouseOn = true; })
        .on('mouseleave.xxx', function() { isMouseOn = false; });  
    //
    $.get('slow.script', function(d) {
        if(isMouseOn) callback(d);
    }).always(function() {
        // even if result fails set loading var to false and unbind hover events
        $this
            .data('tt-busy', false)
            .off('.xxx');
    });
}

在动态加载内容期间取消jquery工具提示

1 个答案: